vue computed 模糊搜索
<h3>模糊搜索的功能</h3>
<hr />
<ol>
<li>对于输入框模糊搜索，动态监听改变数组(使用过滤器)
<ul>
<li>计算属性计算时所依赖的属性一定是响应式依赖，否则计算属性不会执行</li>
<li>计算属性是基于依赖进行缓存的，就是说在依赖没有更新的情况，调用计算属性并不会重新计算，可以减少开销</li>
</ul></li>
</ol>
<pre><code><template>
<input type="text" v-model="query" />
<li
v-for="(item, index) in computedList"
v-bind:key="item.msg"
v-bind:data-index="index"
>
{{ item.msg }}
</li>
</template></code></pre>
<pre><code class="language-javascript">data(){
return {
query:'',
list:[
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
}
}
computed:{
computedList:function(){ //动态改变computedList的数组
var that = this;
return that.list.filter((el) => {
return el.msg.toLowerCase().indexOf(that.query.toLowerCase()) !== -1 //返回数组框所包含的数组
})
}
},</code></pre>
<p>2.输入框始终输入大写</p>
<pre><code><template>
<input v-model="value2Computed" />
</template>
data(){
return {
value2: "",
}
}</code></pre>
<pre><code class="language-javascript">computed:{
value2Computed: {
get: function () {
return this.value2; //得到value2的值
},
set: function (val) {
this.value2 = val.toUpperCase(); //vules2的值转成大写
}
},
}
</code></pre>