computed用于简单的计算
基础用法
页面中:
小计:{{total}}
引入:
import {computed} from 'vue'
使用:
let price=ref(10);
let amount=ref(3);
let total = computed(()=>{
return price.value*amount.value
})
更高级别用法
页面中:
<input type="text" v-model="setNickName" />{{nickname}}
setup中:
let nickname = ref("")
let setNickName = computed({
get(){
return nickname.value;
},
set(val:string){
nickname.value=val;
}
})
用于筛选数据
在vue3版本中,v-if和v-for不能同时使用。
- 在vue2中v-for的优先级高于v-if
- 在vue3版本中v-if优先级高于v-for
所以在vue3中,如果需要既要循环数据,又要对数据进行筛选,就用到了computed。
页面中:
<div v-for="item in goodsComputed" :key="item.id">
{{item.id}}、{{item.title}}
</div>
let goods = [
{id:1,title="羊肉"},
{id:2,title="牛肉"}
]
let goodsComputed = computed(()=>{
let aGoods = goods.filter((val)=>{
return val.id>1;
})
return aGoods;
})