3、vue3当然也可以在 reactive 直接使用
import { reactive, toRefs ,computed} from “vue”;
let shopNum = reactive({
num: computed(() => {
let nums = 0;
obj.value.forEach((item) => {
if (item.checked) {
nums += item.num;
}
});
return nums;
}),
});
return {
…toRefs(shopNum),
};
二、常用的是 get 方法,获取数据,也可以使用set方法改变数据
vue2写法
computed: {
fullName: {
// getter 读取数据触发get方法
get: function () {
return this.firstName + ’ ’ + this.lastName
},
// setter 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数,执行一些自定义的操作
set: function (newValue) {
var names = newValue.split(’ ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
### **vue2 computed 用get 和 set 实现全选反选**
computed: {
checked: {
get() {
// 期中只要有一个不为ture 就不为ture 全部为 true 都为 true
return this.list.every((item) => {
return item.checked == true;
});
},
//获取修改后的值
set(val) {
console.log(val);
if (val) {
// 如果为 true 的换全部为 true
this.list.forEach((item) => {
item.checked = true;
});
} else {
this.list.forEach((item) => {
item.checked = false;
});
}
},
// 当计算属性的值发生改变的时候 去执行一些操作
},
},
### vue2计算属性传参数
v-for=“(val, index) in currentPageNum”
:key=“index”
{{ getIndex(index) }}
computed: {
getIndex() {
// 返回一个函数即可
return function(e) {
console.log(e);
return e + 1;
};
},
},
vue3写法
今年:{{age}}岁
后年:{{newAge}}岁