vue學習02
阿新 • • 發佈：2022-05-12
Vue屬性繫結
Vue中不能直接使用{{ expression }} 語法進行繫結html的標籤，而是用它特有的v-bind指令（就是一種寫法，先按照格式走，具體指令是什麼可以後續再瞭解）。
繫結的語法結構：
<標籤 v-bind:屬性名="要繫結的Vue物件的data裡的屬性名"></標籤> 例如: <span v-bind:id="menuId">{{ menuName }}</span>
參考如下程式碼案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門之資料繫結--屬性繫結</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:id="MenuContaineId"> <a href="#" v-bind:class="MenuClass">首頁</a> <ahref="#" v-bind:class="MenuClass">產品</a> <a href="#" v-bind:class="MenuClass">服務</a> <a href="#" v-bind:class="MenuClass">關於</a> </div> </div> <script> var app = new Vue({ el: '#app', data: {// data: 是Vue物件中繫結的資料 MenuClass: 'top-menu', MenuContaineId: 'sitemenu' } }); </script> </body> </html>
屬性繫結簡寫
由於v-bind 使用非常頻繁，所以Vue提供了簡單的寫法，可以去掉v-bind直接使用:即可。
例如： <div :id="MenuContaineId"> 等價於 <div v-bind:id="MenuContaineId">
輸出純HTML
由於Vue對於輸出繫結的內容做了提前encode，保障在繫結到頁面上顯示的時候不至於被xss攻擊。但某些場景下，我們確保後臺資料是安全的，那麼我們就要在網頁中顯示原生的HTML標籤。Vue提供了v-html指令。
<div id="app"> <div v-bind:id="MenuContaineId" v-html="MenuBody"> </div> </div> <script> var app = new Vue({ el: '#app', data: { // data: 是Vue物件中繫結的資料 MenuContaineId: 'menu', MenuBody: '<p>這裡是選單的內容</p>' } }); </script>
結果：
<div id="app"> <div id="menu"> <p>這裡是選單的內容</p> </div> </div>
樣式繫結
對於普通的屬性的繫結，只能用上面的講的繫結屬性的方式。而Vue專門加強了class和style的屬性的繫結。可以有複雜的物件繫結、陣列繫結樣式和類。
繫結樣式物件
經常我們需要對樣式進行切換，比如：div的顯示和隱藏，某些標籤active等。Vue提供的物件繫結樣式的方式就很容做這些事情。
程式碼： <div v-bind:class="{ active: isActive }"></div> 解釋： 當 isActive為 true時， div就會具有了active樣式類，如果 isActive為false，那麼div就去掉active樣式類。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門之繫結樣式類</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style> .active { background-color: #ccc; } </style> </head> <body> <div id="app"> <div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }"> 繫結顏色類 </div> </div> <script> var app = new Vue({ el: '#app', data: { // data: 是Vue物件中繫結的資料 MenuContaineId: 'menu', isActive: true } }); </script> </body> </html>
混合普通的HTML標籤樣式類及繫結樣式物件
v-bind:class 指令可以與普通的 class 屬性共存。
<div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> </div> <script> var app = new Vue({ el: '#app', data: { // data: 是Vue物件中繫結的資料 isActive: true, hasError: false } }); </script>
結果：
<div id="app"> <div class="static active"> </div> </div>
繫結data中的樣式物件
直接在html屬性中的雙引號內寫物件，還是很不爽，也沒有智慧提示，很容易寫錯。 Vue可以讓我們直接把繫結的class字串指向data的一個物件，這樣就非常方便了，既可以有智慧提示，又可以很複雜進行編輯，不用擔心煩人的""了。
<div id="app"> <div class="static" v-bind:class="classObject"> </div> </div> <script> var app = new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': false } } }); </script>
結果：
<div id="app"> <div class="static active"> </div> </div>
繫結樣式陣列
其實繫結陣列，就是繫結樣式物件的延續，看官網的例子程式碼吧。
<div v-bind:class="[activeClass, errorClass]"> data: { activeClass: 'active', errorClass: 'text-danger' }
當然還有很多其他很有趣的支援，就不贅述了。
例如: <div v-bind:class="[isActive ? activeClass : '', errorClass]"> <div v-bind:class="[{ active: isActive }, errorClass]">
搜尋
複製