v-bind

html屬性不能使用雙大括號形式綁定，只能使用v-bind指令。

在將?v-bind?用于?class?和?style?時，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組。

<div id="app"><!--可以是數(shù)據(jù)模型，可以是具有返回值的js代碼塊或者函數(shù)--><div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {title: "title",}}) </script>

效果：

在將?v-bind?用于?class?和?style?時，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組。

綁定class樣式

數(shù)組語法

我們可以借助于v-bind指令來實現(xiàn)：

HTML：

<div id="app"><div v-bind:class="activeClass"></div><div v-bind:class="errorClass"></div><div v-bind:class="[activeClass, errorClass]"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {activeClass: 'active',errorClass: ['text-danger', 'text-error']}}) </script>

渲染后的效果：（具有active和hasError的樣式）

對象語法

我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class：

<div v-bind:class="{ active: isActive }"></div>

上面的語法表示 active 這個 class 存在與否將取決于數(shù)據(jù)屬性 isActive 的 truthiness（所有的值都是真實的，除了false,0,“”,null,undefined和NaN）。

你可以在對象中傳入更多屬性來動態(tài)切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。如下模板:

<div class="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>

和如下 data：

data: {isActive: true,hasError: false }

結(jié)果渲染為：

<div class="static active"></div>

active樣式和text-danger樣式的存在與否，取決于isActive和hasError的值。本例中isActive為true，hasError為false，所以active樣式存在，text-danger不存在。

綁定style樣式

數(shù)組語法

數(shù)組語法可以將多個樣式對象應(yīng)用到同一個元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

數(shù)據(jù)：

data: {baseStyles: {'background-color': 'red'},overridingStyles: {border: '1px solid black'} }

渲染后的結(jié)果：

<div style="background-color: red; border: 1px solid black;"></div>

對象語法

v-bind:style?的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

數(shù)據(jù)：

data: {activeColor: 'red',fontSize: 30 }

效果：

<div style="color: red; font-size: 30px;"></div>

簡寫

v-bind:class可以簡寫為:class

總結(jié)

以上是生活随笔為你收集整理的v-bind的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。