Vue学习笔记11

十一、computed的使用

computed可以对属性进行计算，只有在属性发生变化时才会被触发，会大大提升效率。计算属性一定要有返回值return。
method方法执行时，所有的方法都会执行，效率会下降。

加A
加B
A--{{AddToA}}
B--{{AddToB}}

computed: {
        AddToA() {
            console.log("A++");
            return this.a + this.age;
        },
        AddToB() {
            console.log("B++");
            return this.b + this.age;
        }
    }

十二、动态绑定CSS

Toggle nearby
Toggle available

       Ryu

computed: {
        compClasses: function(){
            return{
                available: this.available,
                nearby: this.nearby,
            }
        }
    }

十三、v-if和v-show

v-if

 data() {
        return {
            error: false,
            success: false
        };
    }

error
 success
error显示
success显示
others

v-show

show:error

v-if和v-show的区别是，v-if为false时，整个p标签都不存在，v-show的p标签是存在的

十四、v-for

data() {
        return {
            characters: ["小张", "小徐", "小李", "小王"],
            users: [
                { name: "小张", age: 28 },
                { name: "小徐", age: 32 },
                { name: "小李", age: 11 },
                { name: "小王", age: 45 }
            ]
        };
    }

       

            

                {{index}}. {{char}}
            
        

        

            

                {{index}}.{{user.name}}-{{user.age}}
            
        

        

            

                

                    {{key}}.{{val}}