zoukankan      html  css  js  c++  java
  • 二十二、computed计算属性

    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;
                }
            }
        }
  • 相关阅读:
    Pipe
    An Easy Problem?!
    Kadj Squares
    Space Ant
    Intersection
    让网页变为可编辑状态
    typescript入门基础
    大家都能看懂的 canvas基础教程
    数组的foreach方法和jQuery中的each方法
    html单行、多行文本溢出隐藏
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/15240845.html
Copyright © 2011-2022 走看看