计算属性

最新推荐文章于 2024-11-29 15:00:33 发布

原创最新推荐文章于 2024-11-29 15:00:33 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨Vue.js中计算属性的使用方法与优势，通过实例演示如何实现字符串首字母大写及列表模糊查询功能，对比计算属性与普通方法的性能差异。

计算属性放到js中
如，实现将一个名字首字母大写功能
在这里插入图片描述

var vm = new Vue({
            el:"#box",
            data:{
                myname:"xiaoming"
            },
            computed:{
                getMyName(){
                    return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
                }//1、 依赖的状态改变了，计算属性会重新计算一遍；2、计算属性会缓存
            }
        })

在这里插入图片描述
计算属性比普通方法性能更好，且计算属性会缓存。
计算属性应用-----模糊查询

var vm = new Vue({
            el:"#box",
            data:{
                datalist:["aa","bb","cc","dd","add","cee","ee"],
                mytext:''
            },
            computed:{
                getMyDatalist(){
                    return this.datalist.filter(item=>item.indexOf(this.mytext)>-1);
                }
            }
            
        })