怎样使用 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

巴特西

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

最新文章

热门文章