首页 > 其他 > 详细

vue使用computed实现动态过滤

时间:2020-07-30 09:44:03      阅读:132      评论:0      收藏:0      [点我收藏+]

效果:

技术分享图片

 


技术分享图片

 

技术分享图片
 <div id="test">
        Filter:<input type="text" v-model="searchlanguage" />

       <ul>
            <li v-for="language in searchResults">
                {{language}}
            </li>
        </ul>
    </div>
HTML Source Code

 

技术分享图片
  new Vue({
            el: ‘#test‘,
            data() {
                return{
                    searchlanguage: ‘‘,
                    devlanguages: [
                        ‘angularjs‘,
                        ‘vue.js‘,
                        ‘asp.net‘,
                        ‘asp.net mvc‘,
                        ‘mysql‘,
                        ‘ms sql server‘,
                        ‘python‘,
                        ‘.net core‘
                    ]
                }
            },
            computed: {
                searchResults() {
                    let filter = new RegExp(this.searchlanguage, ‘i‘)
                    return this.devlanguages.filter(el => el.match(filter))
                }
            }
        })
JavaScript Source Code

 

computed是计算属性,是基于它们的响应式依赖进行缓存的。即是说,只有在相关响应式依赖发生改变时它们才会重新求值。

 

vue使用computed实现动态过滤

原文:https://www.cnblogs.com/insus/p/13401679.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!