Vue—计算属性

最新推荐文章于 2024-08-17 19:13:55 发布

糖醋小排顾。

最新推荐文章于 2024-08-17 19:13:55 发布

阅读量73

点赞数 2

分类专栏： Vue学习文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Guuiabc/article/details/128743911

版权

Vue学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

用插值实现：

<body>
    <div id="root">
        姓：<input type="text" v-model="firstname"><br/>
        名：<input type="text" v-model="lastname"><br/>
        全名：<span>{{firstname.slice(0,3)}}-{{lastname}}</span>
        <!--slice（0，3）截取前三位-->
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
          firstname:'张',
          lastname:'三'
        }
    })
</script>

用methods方法：

<body>
    <div id="root">
        姓：<input type="text" v-model="firstname"><br/>
        名：<input type="text" v-model="lastname"><br/>
        全名：<span>{{fullname()}}</span></span>
        <!--slice（0，3）截取前三位-->
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
          firstname:'张',
          lastname:'三'
        },
        //数据发生变化，模板都会重新解析一遍
        methods:{
            fullname(){
                return this.firstname+'-'+this.lastname
            }
        }
    })
</script>

计算属性：
1.定义：要用的属性不存在，要通过己有属性计算得来。
2.原理：底层借助了objcet.defineproperty方法提供的getter 和setter。
3.get函数什么时候执行？
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
4.优势：

用计算属性书写 ✔

<body>
    <div id="root">
        姓：<input type="text" v-model="firstname"><br/>
        名：<input type="text" v-model="lastname"><br/>
        全名：<span>{{fullname}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
          firstname:'张',
          lastname:'三'
        },
        //computed里面放计算属性，与data分开
        computed:{
            //里面的内容需要写成对象
            fullname:{
                //作用：当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
                //get什么时候调用：1.初次读取fullName时。2.所依赖的数据发生变化时
                get(){
                    //console.log(this) 此处的this是vm
                    return this.firstname+'-'+this.lastname;
                },
                //vm上的属性是fullname的get值返回的内容，不能用...的方式获取
                //set不是必须的可以不存在
                //set什么时候调用：当fullname被改变时
                set(){
                    const arr=value.splite('-')
                    this.firstname=arr[0]
                    this.lastname=arr[1]
                }
            }
        }
    })
</script>

计算属性：

1.定义：要用的属性不存在，要通过己有属性计算得来。

2.原理：底层借助了objcet.defineproperty方法提供的getter 和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：

与methods实现相比。内部有级存机制（复用），效率更高。调试方便。

5.备注：

1.计算属性最终会出现在vm上，直速取使用即可。

2.如果计算属性要被修改，那必须写set两数去响应修改。且set中要引起计算时依赖的数据发生变化

糖醋小排顾。

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue—计算属性

2.原理：底层借助了objcet.defineproperty方法提供的getter 和setter。2.如果计算属性要被修改，那必须写set两数去响应修改。且set中要引起计算时依赖的数据发生变化。与methods实现相比。内部有级存机制（复用），效率更高。1.定义：要用的属性不存在，要通过己有属性计算得来。1.计算属性最终会出现在vm上，直速取使用即可。(2).当依赖的数据发生改变时会被再次调用。(1).初次读取时会执行一次。3.get函数什么时候执行？
复制链接

扫一扫