Vue.js教程（二）：v-bind動態屬性
阿新 • • 發佈：2018-12-21
上一節我們學習了Vue的基本語法，裡面有個佔位變數{{message}}。這種{{message}}形式的vue變數只適合給標籤中的文字複製（開始標籤和結束標籤中間的文字）。v-bind是給屬性設定變數的。
簡介
v-bind是給屬性設定變數的。屬性和文字的含義如下：
<span title="qianfeng">hello Vue</span>
如上，title是屬性，hello Vue是文字。Vue操作文字可以如下寫法：
<span title="qianfeng">{{text}}</span>
但是操作title屬性使用雙大括號就是錯誤的，比如如下就是錯誤的：
<span title="{{title}}">{{text}}</span>
如上屬性title中使用{{title}}格式佔位是無效的。
屬性中的佔位變數需要使用v-bind操作。
v-bind使用
v-bind作用於標籤的屬性上，使用者繫結屬性變數（動態屬性）。比如要將title屬性通過vue動態賦值，操作步驟和語法如下：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--第一步：匯入vue.js的引用--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--第二步：使用v-bind繫結動態屬性--> <div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！ </span> </div> <!--第三步：啟用vue，給動態屬性複製--> <script type="text/javascript"> var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載於 ' + new Date().toLocaleString() } }) </script> </body> </html>
以上程式碼，除了v-bind之外的其他Vue語法在上一節已經講過。
學習前端最好的方式就是動手用一用，效果出來了就明白了。