首页 > 其他 > 详细

二十二、computed计算属性

时间:2021-09-08 19:17:53      阅读:31      评论:0      收藏:0      [点我收藏+]
computed实战用法
(1)模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板内放入太多的逻辑会让模板过重难以维护。
使用computed前: {{message.split(‘‘).reverse().join(‘‘)}}
使用computed后:{{message}}{{reverseMessage}}
               computed:{
                    reverseMessage(){//这里使用了计算属性的getter属性=>reverseMessage是一个方法
                        return this.message.split(‘‘).reverse().join(‘‘);
                    }
               }
(2)一般情况下,我们只是使用了computed中的getter属性,默认只有getter,因此不能直接修改计算属性
        如果想要修改,可以使用setter属性。=>这时候newName是一个对象
    <input type=‘text‘ v-model=‘newName>{{newName}}
    computed:{
        newName:{
            get(){//getter
                return this.name;
            }
            set(val){//setter。(val的值为input输入框输入的值)
                this.name=val;
            }
        }
    }

 

二十二、computed计算属性

原文:https://www.cnblogs.com/Strugglinggirl/p/15240845.html

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