Vuejs 中的過濾功能

Created: November-22, 2018
<!doctype html>

<html>

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <script src="vue.js"></script>
    <style>
        * {font-family: sans-serif;}
        #app {margin: 0 auto; width:500px;}
        button {
            background: #ccc;
            color: #fff;
            -webkit-appearance:none;
            background: #000;
            border: 0;
            padding: 10px;
            text-align: center;
            width: 49%;
        }
        .searchText{height: 25px;width: 386px;}
        .addItem {height: 30px;width: 226px; padding: 0 10px }
        button.active {
            background: #94d464;
            color: #fff;
        }
        .itemBox {margin: 0 0 10px 0;padding: 0;border: 1px dashed #000;}
        .itemBox li:first-child{background: #000; color:#fff; text-align: center;}
        .itemBox li:first-child span{background: #fff; color:#000;}
        .itemBox li{background: #f9f9f9; padding:10px; list-style: none;border-bottom: 1px dashed #000;}
        .itemBox li span { float: right;display: block;background: #94d464;height: 35px;margin: -8px -9px 0 0;width: 79px;text-align: center;line-height: 35px;}
    </style>
</head>

<body>
    <div id="app">
        <h2 v-bind:title="h1">{{h1}}</h2>
        <div id="tabs">
            <button v-on:click="tabfn(true)" v-bind:class="{active : tab}">Show</button>
            <button v-on:click="tabfn(false)" v-bind:class="{active : !tab}">Hide</button> <br><br>
            <div id="food-item-list" v-if="tab">
                <label for=""> Search Food : <input type="text" class="searchText" v-model="searchText" @keyup="searchFood"></label>
                <h3>Food Item</h3>
                <ul class="itemBox">
                    <!--<food-item v-for="food in list" :foodlist="food" :searchtxt ="searchText"></food-item>-->
                    <li>Food List </li>
                    <li v-for="food in bindList">{{food.item}} <span>₹ {{food.price}}</span></li>
                </ul>
                <input type="text" v-model="addItem" class="addItem" placeholder="Enter food item name">
                <button v-on:click="addItemFn">Add your item</button>
            </div>
            <div v-else>
                <p>No item have in this section</p>
            </div>
        </div>

    </div>
</body>
<script>

    var data = {
        h1: "Vue js five.html (Filters functionality)",
        tab: true,
        list: [{"item": "Kathiyavadi",price:"200"}, {"item": "Gujrati",price:"180"}, {"item": "Panjabi",price:"150"}, {"item": "South-Indian",price:"120"}, {"item": "Bangali",price:"100"}],
        addItem: "",
        searchText: "",
        htmlData: "<p>Your order will surve in just 2 min</p>",
        price:"$",
        total : 1000,
        bindList:[]
    }
    var app = new Vue({
        el: "#app",
        data: data,
        methods: {
            tabfn: function(bolian) {
                this.tab = bolian
            },
            addItemFn: function() {
                if (!this.addItem.length) return
                this.list.push({
                    "item": this.addItem
                })
                this.addItem = ""
                this.searchFood()
            },
            searchFood : function(value){
                //this.bindList = this.list;
                this.bindList = []
                for(var i=0; i < this.list.length; i++){
                    if(this.list[i].item.indexOf(this.searchText) != -1){
                        this.bindList.push(this.list[i])
                    }
                    console.log(this.bindList)
                }
            }
        },
        computed:{
            reverseH1_:function(){
                return this.h1.split('').reverse().join('');
            },
            getTotal:{
                get: function(){
                    return this.price + this.total
                },
                set : function(newvalue){
                    this.price = "#"
                }
            }
        },
        filters:{

        },
    })

    app.searchFood();

</script>

</html>