Vue.js进行查询操作的实例详解

实例代码：

！DOCTYPE html html head meta charset=' UTF-8 '脚本src='http:/lib/vue。量滴js ' type=' text/JavaScript '/脚本标题字符转换/title /head body div id='app '请输入查询关键字：输入类型=' text ' v-model=' search '/table tr th名称/th价格/th数量/th/tr v-for='列表中的x ' TD { { x . name } }/TD { { x . price } }/TD { { x . num } }/TD/tr/table/div脚本类型=' text/JavaScript ' var VM=new Vue({ El : ' # app '，data:{ /*定义空数组装信息*/info:[]，/*定义变量装查询输入的字符串*/search:'' }，/*计算得出比方法效率高，不需要重新渲染页面*/computed : { list : function(){ var arr=[]；for(var I=0；我是。信息。长度；我){如果(这个。信息[一]。名字。indexof(此。搜索)！=-1){ arr.push(this.info[i]) } }返回arr} } })为(var I=1；i20i ){ vm.info.push({name: '手机I，price:1000*i，num 3360 I })}/script/body/html效果如图：

补充：

以上就是Vue.js进行查询操作的实例详解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！