<style>
*{font-size: 14px;margin:0 ;padding:0;list-style-type: none;}
#main{width:800px;margin:0 auto;}
.bar{width:100%;height:30px;background: #dddddd;border-radius: 5px;padding:10px 40px;}
.bar a{width:30px;height:30px;border-radius: 5px;cursor: pointer;}
.form-control{width:600px;background: #fff;border:none;height:30px;border-radius: 5px;padding-left:5px;}
.grid li{float: left;width:20%;margin:2%;}
.grid img{width:100%;}
.list{width:100%;}
.list li{width:100%;border-bottom:1px solid #ddd;height:170px;padding:10px 0px;}
.list li img{float:left;width:20%;}
.list li p{float:left;margin-left:40px;font-size:16px;}
</style>
<div id="main">
<div class="bar">
<input type="text" class="form-control" placeholder="请输入查询内容" v-model="input">
<a class="list-icon" :class="flag=='list'?'active':''" @click="flag='list'">列表</a>
<a class="grid-icon" :class="{'active':flag=='grid'}" @click="flag='grid'">表格</a>
</div>
<ul class="grid" v-if="flag=='grid'">
<li v-for="(item,i) in searchData">
<a><img :src="item.url" :alt="item.title"></a>
</li>
</ul>
<ul class="list" v-else>
<li v-for="(item,i) in searchData">
<a><img :src="item.url" :alt="item.title"></a>
<p>{{item.title}}</p>
</li>
</ul>
</div>
window.onload = function() {
new Vue({
el: "#main",
data: {
flag: "grid",
input: '',
items: [{
title: "this is the one",
url: "images/1.jpg"
},
{
title: "this is the two",
url: "images/2.jpg"
},
{
title: "this is the three",
url: "images/3.jpg"
},
{
title: "this is the four",
url: "images/4.jpg"
}
]
},
computed: {
searchData: function() {
if (!this.input) {
return this.items
};
return this.items.filter(item => {
return item.title.includes(this.input);
});
}
}
})
}
