Vue指令——v-bind作用和实例

Vue指令是指v-开头的一系列指令，v-bind指令的作用：绑定标签的属性，如src，title等，元素的属性在标签的内部。完整写法为v-bind:属性名。简写方式为:属性名。代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"

tony_xj

4018人浏览 · 2020-08-05 16:11:35

tony_xj · 2020-08-05 16:11:35 发布

Vue指令是指v-开头的一系列指令，v-bind指令的作用：

绑定标签的属性，如src，title等，元素的属性在标签的内部。
完整写法为v-bind:属性名。
简写方式为:属性名。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>图片</h2>
        <img v-bind:title="imgTitle">
        <br>
        <input type="button" value="修改状态" @click="changeTitle">

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgTitle: "图片标题",
                isActive: true
            },
            methods: {
                changeTitle: function () {
                    this.imgTitle = "test"
                }
            }
        })
    </script>
</body>

</html>

结果如下：