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

发布时间：2020-12-16 23:27:39 所属栏目：百科来源：网络整理

导读：v-bind：是Vue提供的用于绑定html属性的指令。 html中常见的属性有：id、class、src、title、style等，他们都是以?名称/值对的形式出现，如：id="first" 本篇的内容主要是介绍使用v-bind指令动态给这些属性赋值。话不多说，上代码： script type="text/jav

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

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

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

话不多说，上代码：

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,data : {
            path : </span>"img/clock.png"<span style="color: #000000"&gt;
        }
    });
</span></script>

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

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

运行结果：

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

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,data : {
            path : </span>"img/clock.png"<span style="color: #000000"&gt;
        }
    });
</span></script>

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

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

下面我还要占用大家一点时间，讲解一个小知识点，先单独提取出一行代码进行剖析：

这里我们对属性src做了绑定传值，有时候我们会有这样的需求：图片的路径不是固定的，可能有很多目录，我们需要动态获取路径。假设Vue已经帮我们获取了图片服务器的路径，但是具体的目录路径需要我们前端经过处理获取，再拼接上去。这时我们看以把"path"看做是一个表达式，通过“path + '/pic/a.png' ”的方法动态加载。

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el : </span>"#app"<span style="color: #000000"&gt;,data : {
            path : </span>"img/"<span style="color: #000000"&gt;
        }
    });
</span></script>

运行结果：

每天进步一点点！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!