效果展示
交换布局
vue框架是典型的MVVM前端框架，不提倡程序猿通过操作dom元素来达到效果。并且操纵dom元素不利于性能优化消耗较多内存。
交换布局的核心其实就是满足条件的一方展示。用到的是v-if指令，
<div id="search">
<!-- 查询 -->
<input type="text" name="" id="find" placeholder="请输入搜索内容" v-model="search_content"/>
<img src="../image/搜索.png">
<img src="../image/详情.png" :class="{'active':layout=='list'}" @click="layout='list'">
<img src="../image/网格化.png" :class="{'active':layout=='grid'}" @click="layout='grid'">
</div>
<ul>
<!-- 展示 -->
<div class="flex" v-if="layout=='list'">
<li v-for="item in find">
{{item.title}}
<div id="img">
<img :src=item.img />
</div>
</li>
</div>
</ul>
首先给两个按钮绑定对应事件，第一个是形式是带标题的展示，第二格式网格式的图片展示。@click=“layout=‘list’” 显然这段代码的意思是点击之后data中的layout变量变为了list。所以我们应该在data中提前声明变量layout，并且默认值设为list。
实现交换布局核心就是当layout为list时候展示lsit格式，为grid展示grid格式，所以直接v-if=“layout == ‘list’” 即可
然后为img添加active样式。用到的是v-bind指令，他能够更改属性值，:class意思是要更改的属性为class，active则是如果满足条件就把属性class的值改成active即使用active样式。两种写法：
<img src="../image/详情.png" :class="{'active':layout=='list'}" >
<img src="../image/网格化.png" :class="layout=='grid'?'active':''">
此时就可以做到通过点击图标来实现布局的交换。
模糊查询
作为前端 如果拿到了所有数据进行模糊查询功能的编写也是不难的。本例使用计算属性（响应式数据），同步渲染。因为vue是典型的MVVM框架不需要控制器处理数据，是双向绑定的，通过vm（调度者）实现。
想要实现模糊查询用到的是数组的方法filter（）；
eg：
var aaa=['asv','dsad','www'];
var ccc=aaa.filter(function(item){
return item.indexOf('a')!=-1
})
console.log(ccc)//['asv','dsad']
所以我们在计算属性中也是用这样的方法
computed:{
find:function(){
let that = this;
if(this.search_content==''){ return this.example;}
return this.example.filter(function(item){
return item.title.indexOf(that.search_content)!=-1
// return item.title.includes(that.search_content)
})
}
},
search_content就是用v-model进行绑定的input框里面的值。
也可以使用es6中提供的方法includes，如果包括输入的数据，则返回。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模糊查询</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div id="search">
<!-- 查询 -->
<input type="text" name="" id="find" placeholder="请输入搜索内容" v-model="search_content"/>
<img src="../image/搜索.png">
<img src="../image/详情.png" :class="{'active':layout=='list'}" @click="layout='list'">
<img src="../image/网格化.png" :class="layout=='grid'?'active':''" @click="layout='grid'">
</div>
<div id="show">
<div id="detail">
<ul>
<!-- 展示 -->
<div class="flex" v-if="layout=='list'">
<li v-for="item in find">
{{item.title}}
<div id="img">
<img :src=item.img />
</div>
</li>
</div>
</ul>
<ul>
<!-- 展示 -->
<div class="flex2" v-if="layout=='grid'">
<li v-for="item in example">
<div id="img2">
<img :src=item.img />
</div>
</li>
</div>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
layout:'list',
search_content:"",
example:[
{
title:"vue学习",
img:"../image/vue.png"
},
{
title:"交换布局",
img:"../image/布局.png"
},
{
title:"模糊查询",
img:"../image/搜索.png"
},
{
title:"2020.7.11",
img:"../image/学习.png"
},
{
title:"搭好基础准备练习后台管理系统",
img:"../image/加油站.png"
},
]
},
computed:{
find:function(){
// let that = this;
if(this.search_content==''){ return this.example;}
// return this.example.filter(function(item){
// //return item.title.indexOf(that.search_content)!=-1
// return item.title.includes(that.search_content)
// })
return this.example.filter(item=>{
//return item.title.indexOf(that.search_content)!=-1
return item.title.includes(this.search_content)
})
}
},
})
</script>
</body>
<style type="text/css">
.active {
background-color: #764BA2;
}
#app {
position:absolute;
left: 300px;
}
#show {
width: 900px;
background-color: #2980B9;
}
.flex li {
background-color: #30CFD0;
text-align: center;
margin: 12px;
width: 270px;
float: left;
}
.flex2 li {
background-color: #30CFD0;
text-align: center;
margin: 10px;
width: 420px;
float: left;
}
.flex2 #img2 img{
width: 400px;
height: 400px;
}
* {
margin: 0rem;
padding: 0rem;
list-style: none;
}
#search {
margin-top: 30px;
width: 900px;
height: 100px;
background-color: #2980B9;
text-align: center;
box-sizing: border-box;
}
#search img {
vertical-align: middle;
width: 20px;
height: 20px;
}
#search input {
margin-top: 28px;
width: 350px;
height: 40px;
}
</style>
</html>