vue:标签属性绑定Vue实例【ref,reactive,内置指令v-bind,v-on】,预定义变量、方法【$methods,$computed】
<template>
<div>
<button v-bind:disabled="isButtonDisabled" v-on:click="incrementCounter">
Click me
</button>
<p>Counter: {{ counter }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 响应式数据
const counter = ref(0);
const isButtonDisabled = ref(false);
// 方法
function incrementCounter() {
counter.value++;
// 假设counter达到某个值按钮需要禁用
isButtonDisabled.value = counter.value >= 10;
}
// 返回绑定到模板的响应式数据和方法
return {
counter,
isButtonDisabled,
incrementCounter
};
}
};
</script>
这段代码展示了如何在Vue组件中使用ref
来创建响应式的基本数据类型,以及如何使用v-bind
和v-on
来绑定属性和事件。它还演示了如何在方法内部修改响应式数据,并根据条件来启用或禁用按钮。
评论已关闭