024——VUE中filter的使用

时间：2024-04-30 23:00:01
<!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>

　　

相关文章