1. 在 Vue 中可是使用 v-bind 对 html 中的 属性 进行绑定, 如下所示, 我们想给这个 a 标签绑定一个 title 值:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> </head> <body> <div id="app"> <!-- here --> <a href="#" v-bind:title="message">Fly me to the Moon.</a> </div> <script> var vApp = new Vue({ el: "#app", data: { message: "Bart Howard" } }) </script> </body> </html>
下面是预览情况:
2. 注意, 这里 v-bind:title="" 的引号内可以使用 js 表达式, 比如下面的三元运算表达式.
<div id="app"> <a href="#" v-bind:title="lan === 'en' ? en : ch">Fly me to the Moon.</a> </div> <script> var vApp = new Vue({ el: "#app", data: { lan: "ch", en: "Bart Howard", ch: "巴特·霍华德" } }); </script>
3. v-bind 可是简写为 : , 比如 v-bind:href 可是简写为 :href