计算属性与监视属性
计算属性
在computed对象中定义计算属性的方法,在页面中使用{ {方法名}}
监视属性
通过 vm对象中的$watch方法或者 watch配置来监视指定的属性,
当属性发生变化时,回调函数自动调用,在函数内部进行计算
使用vue计算属性实现一个简单的查找:
效果前:
效果后:
html里面写:
<div id="app">
<input type="text" placeholder="请输入商品" v-model="value" /><button>搜索</button>
<div v-for="(sou,key) in sous" :key="key">{
{sou.name}}</div>
</div>
组件里面写:
<script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
value: "",
ai: [{ name: "Timi", age: 10 },
{ name: "Tom", age: 18 },
{ name: "Jack", age: 12 },
{ name: "Maria", age: 21 },
]
},
computed: {
sous() {
//使用filter过滤在返回给sous
return this.ai.filter(val => val.name.indexOf(this.value) !== -1)
}
}
})
</script>