一视译、樣式綁定

<div id="app">
// 設(shè)置一個(gè)按鈕設(shè)置點(diǎn)擊事件 從而獲取到樣式
   <button @click="bg_b=true">顯示藍(lán)色背景</button>
   <button @click="c_w=true">顯示白色字體</button>
   <!-- :class可以綁定一個(gè)對象爽撒，對象的屬性名是類選擇器的名稱入蛆，屬性值返回true，表示添加該選擇器硕勿。 -->
//   <!-- :class指定一個(gè)對象哨毁，對象的屬性名必須是樣式的名字，屬性值必須返回布爾值源武，表示擁有指定的樣式 扼褪，如果屬性有橫線的話 就要加個(gè)引號-->
   <div :class="{bg_b:bg_b,c_w:c_w}">好好學(xué)習(xí)Vue</div>
   <button @click="arr.push('bg_p')">顯示粉色背景</button>
   <button @click="arr.push('c_g')">顯示綠色字體</button>
   <!-- :class可以綁定字符串一個(gè)數(shù)組，數(shù)組中的每一個(gè)元素就是一個(gè)選擇器 -->
   <div :class="arr">好好學(xué)習(xí)Vue</div>
   <!-- :class可以直接綁定一個(gè)表示 -->
   <div :class="bg_b?'bg_b':''">好好學(xué)習(xí)Vue</div>
   <!-- :class也可以通過數(shù)組綁定多個(gè)表達(dá)式 -->
   <div :class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好學(xué)習(xí)Vue</div>
   <hr>
   <p>背景色：<input type="text" v-model="bgc"></p>
   <p>字體色：<input type="text" v-model="c"></p>
   <!-- :class是綁定類選擇器粱栖，:style是綁定內(nèi)聯(lián)樣式话浇。
:style通常也是綁定一個(gè)對象，對象的屬性名是原生CSS的屬性名闹究，但是要采用小駝峰命名規(guī)范幔崖。 -->
   <div :style="{backgroundColor:bgc,color:c}">好好學(xué)習(xí)Vue</div>
   
   <ul>
       <li @click="activeIndex=index" v-for="(item,index) in list" :key="index" :class="{active:activeIndex===index}">{{item}}</li>
   </ul>
</div>

二、 計(jì)算屬性

 <div id="add">
        <ul>
            <li v-for="(item,index) in goodses">產(chǎn)品: {{item.name}} ------ 價(jià)格: {{item.price}}元 </li>
        </ul>
        <div> 總價(jià)是:{{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: '洗衣機(jī)',
                    price: 3999
                }, {
                    name: '電視機(jī)',
                    price: 7999
                }, {
                    name: '油煙機(jī)',
                    price: 2888
                }, {
                    name: '計(jì)算機(jī)',
                    price: 7999
                }, {
                    name: '照相機(jī)',
                    price: 1999
                }, {
                    name: '手機(jī)',
                    price: 3999
                }]
            },
            menthods() {

            },
           // 計(jì)算屬性
            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>

計(jì)算屬性得優(yōu)勢：有緩存跋核，當(dāng)頁面數(shù)據(jù)發(fā)生變化時(shí)候岖瑰，所有得方法都要重新執(zhí)行，當(dāng)計(jì)算屬性用到得數(shù)據(jù)發(fā)生變化時(shí)候砂代，計(jì)算屬性才會重新執(zhí)行
計(jì)算屬性里邊蹋订，定義的是方法：而這些方法在模板中 是當(dāng)前屬性來使用的，這個(gè)屬性是計(jì)算之后返回的結(jié)果
定義計(jì)算屬性時(shí)刻伊，不要跟methods選項(xiàng)里邊的方法同名
計(jì)算屬性也有監(jiān)視的能力

三露戒、 偵聽器