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>
