利用computed编写模糊查询

运用计算属性computed编写模糊查询

说明（计算属性computed与方法methods的比较）：

1、methods需要在方法名后加(),而computed只需要加属性名；

2、methods必须要通过表单事件@input事件监听来重复获取表单value值，而computed不需要通过事件监听，一直沿用源数据进行更新；

3、methods每当触发函数重新渲染时，调用方法将会再次执行函数，computed是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时才会对它们重新计算求职，整个内存中只保留一份数据；

总结：没有计算属性computed并不是不能执行某些功能，但有了computed就变得更高效了。

 

下面是代码部分：

HTML：

<div id="app">
    <input type="text" v-model="mytext">
    计算属性不需要添加事件绑定
    <input type="text" @click="handleInput">
    <ul> 7         <li v-for="data in getMyDatalist">
            {{data}}
        </li>
    </ul>
</div>

【注意】

计算属性不需要添加事件绑定，但如果想换methods方法执行，

需要将表单内容替换成事件绑定：<input type="text" @click="handleInput()">

Javascript

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            mytext: "",
            datalist: ["fdds", "sdjdf", "dfs", "skfd", "faf", "afew", "rewt"]
        },
        computed: {
            getMyDatalist() {
                return this.datalist.filter(item => item.indexOf(this.mytext) > -1)
            }
        }
    })
</script>

【注意】

使用vue编写script部分前记得先引入vue.js文件或者cdn的vue网址

 

公众号：“京衡的前端填坑日志”

如果有更多意见，请留言~