VUE实现交换布局以及input检索

代码语言：javascript复制

<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>

代码语言：javascript复制

<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>

代码语言：javascript复制

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.indexOf(this.input)!=-1; //es5
                    return item.title.includes(this.input); //es6
                });
            }
        }
    })

}
// var arr = ["red","blue","green","orange"];
// var b =arr.filter(function(item,index){
//  return item.indexOf("r") !=-1
// })

input

0 人点赞