Vue3 setup中computed计算属性的使用
作者:温新
时间:2021-08-22
hi,我是温新,一名PHPer
在setup中,要使用computed计算属性就必须先导入computed。
setup中计算属性的基础使用
<div id="app">
<button @click="addCount">{{ count }}</button>
<p>计算属性后的值:{{ countComputed }}</p>
</div>
<script>
const app = Vue.createApp({
setup() {
const {ref, computed} = Vue;
let count = ref(0);
let addCount = () => {
count.value+=1;
}
// 计算属性
let countComputed = computed(()=>{
// 计算属性初始化加10
return count.value + 10;
});
return {count,addCount, countComputed}
}
});
const vm = app.mount('#app');
</script>
setup中计算属性中的get/set
使用get/set
时,computed
传入的参数就是一个对象了。
<div id="app">
<button @click="addCount">{{ count }}</button>
<p>计算属性后的值:{{ countComputed }}</p>
</div>
<script>
const app = Vue.createApp({
setup() {
const {ref, computed} = Vue;
let count = ref(0);
let addCount = () => {
count.value+=1;
}
// 计算属性
let countComputed = computed({
// 获取数据时调用
get: () => {
return count.value + 10;
},
// 设置数据时调用
set: () => {
return count.value = 20;
}
});
// 3秒后对数据进行修改
setTimeout(()=>{
countComputed.value = 30;
},3000);
return {count,addCount, countComputed}
}
});
const vm = app.mount('#app');
</script>
我是温新
每天进步一点,就一点点
请登录后再评论