一、样式绑定

<div id="app">
// 设置一个按钮设置点击事件 从而获取到样式
   <button @click="bg_b=true">显示蓝色背景</button>
   <button @click="c_w=true">显示白色字体</button>
   <!-- :class可以绑定一个对象，对象的属性名是类选择器的名称，属性值返回true，表示添加该选择器。 -->
//   <!-- :class指定一个对象，对象的属性名必须是样式的名字，属性值必须返回布尔值，表示拥有指定的样式 ，如果属性有横线的话 就要加个引号-->
   <div :class="{bg_b:bg_b,c_w:c_w}">好好学习Vue</div>
   <button @click="arr.push('bg_p')">显示粉色背景</button>
   <button @click="arr.push('c_g')">显示绿色字体</button>
   <!-- :class可以绑定字符串一个数组，数组中的每一个元素就是一个选择器 -->
   <div :class="arr">好好学习Vue</div>
   <!-- :class可以直接绑定一个表示 -->
   <div :class="bg_b?'bg_b':''">好好学习Vue</div>
   <!-- :class也可以通过数组绑定多个表达式 -->
   <div :class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好学习Vue</div>
   <hr>
   <p>背景色：<input type="text" v-model="bgc"></p>
   <p>字体色：<input type="text" v-model="c"></p>
   <!-- :class是绑定类选择器，:style是绑定内联样式。
:style通常也是绑定一个对象，对象的属性名是原生CSS的属性名，但是要采用小驼峰命名规范。 -->
   <div :style="{backgroundColor:bgc,color:c}">好好学习Vue</div>
   
   <ul>
       <li @click="activeIndex=index" v-for="(item,index) in list" :key="index" :class="{active:activeIndex===index}">{{item}}</li>
   </ul>
</div>

二、 计算属性

 <div id="add">
        <ul>
            <li v-for="(item,index) in goodses">产品: {{item.name}} ------ 价格: {{item.price}}元 </li>
        </ul>
        <div> 总价是:{{totalPrice}}元</div>
    </div>
    <script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js'></script>
    <script>
        new Vue({
            el: '#add',
            data: {
                goodses: [{
                    name: '洗衣机',
                    price: 3999
                }, {
                    name: '电视机',
                    price: 7999
                }, {
                    name: '油烟机',
                    price: 2888
                }, {
                    name: '计算机',
                    price: 7999
                }, {
                    name: '照相机',
                    price: 1999
                }, {
                    name: '手机',
                    price: 3999
                }]
            },
            menthods() {

            },
           // 计算属性
            computed: {
                totalPrice() {
                    // let sum = 0
                    // this.goodses.forEach(r => {
                    //     sum += r.price
                    // });
                    // return sum
                   return this.goodses.reduce((a,b)=>{
                   return a + b.price
                   },0)
                }
            }
        }) </script>

计算属性得优势：有缓存，当页面数据发生变化时候，所有得方法都要重新执行，当计算属性用到得数据发生变化时候，计算属性才会重新执行
计算属性里边，定义的是方法：而这些方法在模板中 是当前属性来使用的，这个属性是计算之后返回的结果
定义计算属性时，不要跟methods选项里边的方法同名
计算属性也有监视的能力

三、 侦听器