vue学习之交换布局以及模糊查询

交换布局

vue框架是典型的MVVM前端框架&＃xff0c;不提倡程序猿通过操作dom元素来达到效果。并且操纵dom元素不利于性能优化消耗较多内存。
交换布局的核心其实就是满足条件的一方展示。用到的是v-if指令&＃xff0c;

<div id&＃61;"search"><input type&＃61;"text" name&＃61;"" id&＃61;"find" placeholder&＃61;"请输入搜索内容" v-model&＃61;"search_content"/><img src&＃61;"../image/搜索.png"> <img src&＃61;"../image/详情.png" :class&＃61;"{&＃39;active&＃39;:layout&＃61;&＃61;&＃39;list&＃39;}" &＃64;click&＃61;"layout&＃61;&＃39;list&＃39;"><img src&＃61;"../image/网格化.png" :class&＃61;"{&＃39;active&＃39;:layout&＃61;&＃61;&＃39;grid&＃39;}" &＃64;click&＃61;"layout&＃61;&＃39;grid&＃39;">div> <ul><div class&＃61;"flex" v-if&＃61;"layout&＃61;&＃61;&＃39;list&＃39;"><li v-for&＃61;"item in find">{{item.title}}<div id&＃61;"img"><img :src&＃61;item.img /> div>li>div>ul>


首先给两个按钮绑定对应事件&＃xff0c;第一个是形式是带标题的展示&＃xff0c;第二格式网格式的图片展示。&＃64;click&＃61;“layout&＃61;‘list’” 显然这段代码的意思是点击之后data中的layout变量变为了list。所以我们应该在data中提前声明变量layout&＃xff0c;并且默认值设为list。
实现交换布局核心就是当layout为list时候展示lsit格式&＃xff0c;为grid展示grid格式&＃xff0c;所以直接v-if&＃61;“layout &＃61;&＃61; ‘list’” 即可
然后为img添加active样式。用到的是v-bind指令&＃xff0c;他能够更改属性值&＃xff0c;:class意思是要更改的属性为class&＃xff0c;active则是如果满足条件就把属性class的值改成active即使用active样式。两种写法&＃xff1a;

<img src&＃61;"../image/详情.png" :class&＃61;"{&＃39;active&＃39;:layout&＃61;&＃61;&＃39;list&＃39;}" >
<img src&＃61;"../image/网格化.png" :class&＃61;"layout&＃61;&＃61;&＃39;grid&＃39;?&＃39;active&＃39;:&＃39;&＃39;">


此时就可以做到通过点击图标来实现布局的交换。

模糊查询

作为前端 如果拿到了所有数据进行模糊查询功能的编写也是不难的。本例使用计算属性&＃xff08;响应式数据&＃xff09;&＃xff0c;同步渲染。因为vue是典型的MVVM框架不需要控制器处理数据&＃xff0c;是双向绑定的&＃xff0c;通过vm&＃xff08;调度者&＃xff09;实现。
想要实现模糊查询用到的是数组的方法filter&＃xff08;&＃xff09;&＃xff1b;
eg&＃xff1a;

var aaa&＃61;[&＃39;asv&＃39;,&＃39;dsad&＃39;,&＃39;www&＃39;];var ccc&＃61;aaa.filter(function(item){return item.indexOf(&＃39;a&＃39;)!&＃61;-1})console.log(ccc)//[&＃39;asv&＃39;,&＃39;dsad&＃39;]


所以我们在计算属性中也是用这样的方法

computed:{find:function(){let that &＃61; this;if(this.search_content&＃61;&＃61;&＃39;&＃39;){ return this.example;} return this.example.filter(function(item){return item.title.indexOf(that.search_content)!&＃61;-1// return item.title.includes(that.search_content)})}},


search_content就是用v-model进行绑定的input框里面的值。
也可以使用es6中提供的方法includes&＃xff0c;如果包括输入的数据&＃xff0c;则返回。

代码

{{item.title}}