记录Vue里面的computed和filters属性
2020-01-07 本文已影响0人
码枫云
computed也叫做计算属性(计算机的英文是computer),它被定义在Vue实例里面与data,methods属性等同级,有缓存数据的特点,任何data中数据变化立即重新计算,如果没有变化就会取上一次的值,不需要每次重新进行计算操作,从而达到性能的优化,并且computed里面的方法必须retrun结果,computed里面的方法是直接当做普通属性调用不加括号,另外还有内置get和set方法
<body>
<div id="app">
<p>总数是:{{getTotal}}</p>
<button @click="add">总数加一</button>
</div>
</body>
<script>
let vm = new Vue({
el:"#app",
data:{
priceList:[15,99,43,88,35]
},
methods: {
add(){
this.priceList.push(1)
}
},
computed: {
getTotal(){
let total = this.priceList.reduce((prev,cur,index,arr)=>{
prev += cur;
return prev
},0)
return total
}
},
})
</script>
filters也叫做过滤器,用来对数据展示之前做一定的处理(处理时间戳等等),还可以注册全局过滤器( Vue.filter("过滤器名字",(val)=>{}))
<body>
<div id="app">
<p >{{num | fn}}</p>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
num:10
},
filters: {
fn(val){
val += 10
return val
}
}
})
</script>
