v-bind就是用於綁定數據和元素屬性的
v-bind后面是：屬性名=，v-bind也要有一個簡寫的方式 就是：（冒號），可以理解是表示綁定這個屬性，綁定之后，對應的值要去vue的數據里面找。
<!-- 完整語法 --> <a v-bind:href="url">...</a> <!-- 縮寫 --> <a :href="url">...</a> <!-- 動態參數的縮寫 (2.6.0+) --> <a :[key]="url"> ... </a>
如果你的 Vue 實例有一個 data property [key]，其值為 "href"，那么這個綁定將等價於 v-bind:href。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-bind 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style> .red { color: red; } img { width: 100px; height: 100px; } </style> <body> <div id="app"> <a v-bind:href="url">{{text}}</a> <img v-bind:src="img"> <!-- v-bind也要有一個簡寫的方式 就是：冒號 --> <p :class="bool?'red':''">我是紅色</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { url: "http://www.baidu.com", text: "百度一下", img: "https://cn.vuejs.org/images/logo.png", bool: true }, }) </script>
打開瀏覽器的 JavaScript 控制台，輸入 app.img="https://www.baidu.com/img/baidu_jgylogo3.gif"，就會再一次看到這個綁定了img 的 HTML 已經進行了更新。
動態設置html屬性值。