第三節 Vue3.x中的事件方法入門、模板語法模板中類和樣式綁定 · vue3.x

### 一、Vue3.x中的事件方法入門 **業務邏輯：** ~~~ export default { data() { return { num: 1, msg: "你好vue", }; }, methods: { setMsg() { this.msg = "我是方法里改變后的msg"; }, getMsg() { alert(this.msg); }, }, }; ~~~ **template模板**： ~~~ <template> <div> <h2>{{ msg }}</h2> <button @click="setMsg()">設置msg</button> <br /> <br> <button @click="getMsg()">獲取msg</button> <br> <br> <h2>Num:{{num}}</h2> <button @click="num += 1">Add 1</button> </div> </template> ~~~ ### 二、Vue3 v-bind綁定Class 當`v-bind`與`class`和一起使用時，Vue提供了特殊的增強功能`style`。除了字符串外，表達式還可以求值為對象或數組。 #### **1.1、v-bind:class綁定字符串** **業務邏輯**： ~~~ export default { name: "App", data() { return { isActive: "active", }; }, }; ~~~ **template模板**： ~~~ <div :class="isActive"></div> ~~~ **Css**： ~~~ .active { width: 100px; height: 100px; background: red; } ~~~ #### **1.2、v-bind:class綁定對象** **業務邏輯**： ~~~ export default { name: "App", data() { return { isActive: true, hasError: false }; }, }; ~~~ **template模板**： ~~~ <div :class="{ 'active': isActive, 'error': hasError }"> v-bind:class演示 </div> ~~~ **Css**： ~~~ .active { width: 100px; height: 100px; background: red; } .error { color: blue; } ~~~ #### **1.3、v-bind:class 結合 class的使用** **業務邏輯**： ~~~ export default { name: "App", data() { return { isActive: true, hasError: false }; }, }; ~~~ **template模板**： class會與:class共同存在 ~~~ <div class="static" :class="{ 'active': isActive, 'error': hasError }"> v-bind:class演示 </div> ~~~ **Css**： ~~~ .static { font-size: 20px; } .active { width: 100px; height: 100px; background: red; } .error { color: blue; } ~~~ **它將呈現：** ~~~ <div class="static active error"></div> ~~~ #### **1.4、數組語法** **業務邏輯：** ~~~ data() { return { activeClass: 'active', errorClass: 'text-danger' } } ~~~ **模板：** ~~~ <div :class="[activeClass, errorClass]"></div> ~~~ #### **1.5、數組語法結合三目運算** **業務邏輯：** ~~~ export default { name: "App", data() { return { isActive: true, activeClass: 'active', errorClass: 'error', }; }, }; ~~~ **模板：** ~~~ <div?:class="[isActive???activeClass?:?errorClass]">active</div> ~~~ **Css：** ~~~ .active { width: 100px; height: 100px; background: red; } .error { color: blue; } ~~~ ### 三、v-bind:style 綁定內聯樣式 #### **2.1、第一種綁定方式** **業務邏輯：** ~~~ data() { return { activeColor: 'red', fontSize: 30 } } ~~~ **模板:** ~~~ <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ~~~ #### **2.2、第二種綁定方式** **業務邏輯：** ~~~ data() { return { styleObject: { color: 'red', fontSize: '13px' } } } ~~~ **模板:** ~~~ <div :style="styleObject"></div> ~~~ #### **2.3、第三種綁定方式數組方式** **業務邏輯：** ~~~ data() { return { baseStyles: { color: 'orange', fontSize: '13px' }, overridingStyles: { width: "100px", height: "100px", background: "blue" } } } ~~~ **模板:** ~~~ <div :style="[baseStyles, overridingStyles]"></div> ~~~ #### 2.4、自動前綴當您使用需要一個CSS屬性[供應商前綴](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)的`:style`，例如`transform`，Vue公司會自動檢測并添加適當的前綴到應用的樣式。 #### 2.5、多個值您可以為樣式屬性提供多個（前綴）值的數組，例如： ~~~ <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> ~~~ 這只會呈現瀏覽器支持的數組中的最后一個值。在此示例中，它將`display: flex`為支持非前綴版本的flexbox的瀏覽器呈現。 ### 四、案例：循環數據第一個數據高亮顯示 **業務邏輯：** ~~~ export default { name: "App", data() { return { list: ['馬總', '劉總', '李總'], }; }, }; ~~~ **模板：** ~~~ <ul> <li v-for="(item,index) in list" :key="index" :class="{'red':index==0,'blue':index==1}">{{item}}</li> </ul> ~~~ **Css：** ~~~ .red { color: red; } .blue { color: blue; } ~~~