Vue学习之路第五篇:v-bind

v-bind:是Vue提供的用于绑定html属性的指令。

html中常见的属性有:id、class、src、title、style等,他们都是以 名称/值对 的形式出现,如:id="first"

本篇的内容主要是介绍使用v-bind指令动态给这些属性赋值。

话不多说,上代码:

<body>
    <div id="app">
        <img v-bind:src="path" style="width: 200px;height: 200px"/>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                path : "img/clock.png"
            }
        });
    </script>
</body>

代码很简单,主要分为两个模块:前端定义了一个Img标签,它的src属性值通过v-bind指令从Vue对象中获取;js代码定义了Vue对象,并声明了data数据。

注意:在src前面我们添加了 “v-bind:” 千万不要忘了v-bind后面的冒号,规则就是这么定的。

运行结果:

接下来我要向大家介绍v-bind的一种简写形式,那就是我们在实际传递属性值数据的时候可以不写“v-bind”只留属性名称前面的冒号即可。

<body>
    <div id="app">
        <img :src="path" style="width: 200px;height: 200px"/>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                path : "img/clock.png"
            }
        });
    </script>
</body>

这里省略了“v-bind”,只在src属性名前保留了冒号,看下运行结果:

结果一样,大家有兴趣可以动手尝试一下html的其他属性,毕竟实践是最好的老师,写程序要勤动手。

每天进步一点点!

猜你喜欢

转载自www.cnblogs.com/shibin90/p/10314517.html
今日推荐