024——VUE中filter的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>VUE中filter的使用</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="lantian">
    <ul v-for="v in news">
        <li>{{v.cont}}</li>
    </ul>
    <input type="text" v-on:keyup.enter="search" v-model="searchCon">
</div>
<script>
    var app = new Vue({
        el: '#lantian',
        data: {
            searchCon:'',
            news: [
                {'id': 5, 'cont': 'HD测试五'},
                {'id': 1, 'cont': '测hd试一'},
                {'id': 4, 'cont': '测试四'},
                {'id': 3, 'cont': '测试Hd三'},
                {'id': 2, 'cont': '测试二'}
            ]
        },
        methods: {
            search:function () {
                this.news=this.news.filter((item)=>{
                    var reg=new RegExp(this.searchCon,'i');
                    return reg.test(item.cont);
                });
            }

        }
    });
</script>
</body>
</html>