vue学习 计算属性部分与强制绑定class和style

1：用对象结构来缓存计算属性数据 

属性名：标识名称，属性值，真正缓存的数据 

{
    fullName:'A-B',
    fullName3:'A-B'
}

obj={}
obj[obj] = obj;
obj['[Object object]'] = obj

 计算属性：通过计算动态产生一个要显示的结果数据

计算属性方法：包装getter

执行的时机：

1）初始显示第一次执行，得到初始值显示

2）依赖数据发生改变就会再次调用

计算属性有缓存，缓存由对象来存储计算属性数据，用处：多次使用时，只需要计算一次，当进行引用时，会在缓存里面找，若没有，则进行计算，若有，则直接取用。

二、强制绑定class和style

理解：在引用界面中，某个（些）元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术

1:class绑定 :class="xxx" xx是字符串 xxx是对象 xx是数组

动态class什么时候用对象class：类型是确定的，不确定有无

动态class什么时候用字符串语法：类名是不确定的

<p :class="myClass">xxxxxxx</p>//class绑定
<p :class="{myClass:hasA,classB:hasB}">xxxxxxx</p> //样式显隐，当true时进行设定，当false时不进行设置
<p :class="['classA,'classB']">xxxxxxx</p>
<button @click="update"></button>

<script>
    new Vue({
        el: '#demo',
        data: {
            myClass:'classA',
            hasA:true,
            hasB:false 
        }
    })
    methods:{
        update(){
            this.hasA=!this.hasA;
            this.hasB=!this.hasB;
        }
    }
</script>
<style>
    .classA{
        color: red;
    }
    .classB{
        background: blue;
    }
</style>

2：style绑定

：style="{color:activeColor,fontSize:fontSize+'px'}"  其中 activeColor/fontSize:fontSize是data属性

<p :style="{color:myColor,fontSize:mySize+'px'}">xxxx</p>
<button @click="update"></button>
<script>
new Vue=({
    el:"#demo",
    data:{
        myColor:'white',
        mySize:'32'
    },
    methods:{
        update(){
            this.myColor = 'bule'
            this.mySize= '60'
        }
    }
})
</script>