怎样使用 v-bind 绑定 html 标签的属性值?

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