Vuejs學習筆記(一)-7.html的屬性動態繫結操作v-bind
阿新 • • 發佈：2021-06-30
前面學了vue的插值操作，基本是對html標籤內部展示的內容的展示。此處學習v-bind是對標籤屬性的動態繫結操作。
demo1:動態繫結class屬性：
知識點1:v-bind動態繫結class屬性
知識點2：v-bind動態繫結class屬性使用的是物件繫結，當style變數對應的值為true時，顯示該style;為false則不顯示
知識點3: vue解析屬性時，會將非動態繫結的class屬性和動態繫結的class屬性進行合併
程式碼如下：
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-v-bind動態繫結class物件語法.html5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/6/30 21:38 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-v-bind動態繫結class物件語法</title> 16 <style> 17 .active { 18 color: red;19 } 20 .offline { 21 color: green; 22 } 23 .title { 24 font-size: 50px; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="app"> 30 <!-- 知識點1:v-bind動態繫結class屬性--> 31 <!-- 知識點2：v-bind動態繫結class屬性使用的是物件繫結，當style變數對應的值為true時，顯示該style;為false則不顯示--> 32<!-- 知識點3: vue解析屬性時，會將非動態繫結的class屬性和動態繫結的class屬性進行合併--> 33 <h2 class='title' v-bind:class="{active:isActive,offline:!isActive}">{{ message }}</h2> 34 <button v-on:click="changeClick">改變顏色</button> 35 </div> 36 <script src="../js/vue.js"></script> 37 <script> 38 39 const app = new Vue({ 40 el: '#app', 41 data: { 42 message: 'hello', 43 isActive: true, 44 }, 45 methods: { 46 changeClick() { 47 this.isActive = !this.isActive 48 } 49 } 50 }) 51 </script> 52 </body> 53 </html>
顯示如下：
class為 title和active時的顯示：
class為offline和title時的顯示：
Demo2:動態繫結class的物件語法寫法2
以上動態繫結class時，實質上是動態繫結一個物件，如果該物件非常長時，可以抽象到vue例項內部的方法中，然後再Html頁面呼叫這個方法,效果一樣，程式碼更好維護。如下：
<!-- @author:invoker @project:project_lianxi @file: 02-v-bind動態按本規定class物件(抽離物件).html @contact:invoker2021@126.com @descript: @Date:2021/6/30 21:53 @version: html5 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-v-bind動態繫結class物件語法</title> <style> .active { color: red; } .offline { color: green; } .title { font-size: 50px; } </style> </head> <body> <div id="app"> <!-- 知識點4:物件語法，寫法更加優雅--> <h2 class='title' v-bind:class="getClasses()">{{ message }}</h2> <button v-on:click="changeClick">改變顏色</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', isActive: true, }, methods: { changeClick() { this.isActive = !this.isActive }, getClasses() { // 返回一個物件，所以使用{} return { active: this.isActive, offline: !this.isActive } } } }) </script> </body> </html>
Demo3:動態繫結class的方式3，陣列語法（具體應用場景未知）
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 03-v-bind動態繫結class屬性的陣列語法.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/6/30 22:05 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>03-v-bind動態繫結class屬性的陣列語法</title> 16 <style> 17 .aa { 18 color: red; 19 } 20 .bb { 21 fone-size:35px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="app"> 27 <h2 v-bind:class="getClasses()">{{ message }}</h2> 28 </div> 29 <script src="../js/vue.js"></script> 30 <script> 31 32 const app = new Vue({ 33 el: '#app', 34 data: { 35 message: 'hello', 36 active:'aa', 37 offLine:'bb' 38 }, 39 methods:{ 40 getClasses(){ 41 return [this.active,this.offLine] 42 } 43 } 44 45 }) 46 </script> 47 </body> 48 </html>