vue3 + tsx语法小记
<script lang="tsx">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
return () => (
<div>
<p>{count.value}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
},
});
</script>这个例子展示了如何在Vue 3中使用TSX来创建一个简单的计数器应用。我们使用<script lang="tsx">来指定我们要写TSX代码。defineComponent函数用于定义组件，ref用于创建响应式数据。通过在setup函数中定义increment和decrement方法来改变计数器的值，并在返回的渲染函数中渲染计数器的当前值和控制按钮。
评论已关闭