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的其他属性，毕竟实践是最好的老师，写程序要勤动手。

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

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

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

<body>

    <div id="app">

        <img v-bind:src="path + 'clock.png'" style="width: 200px;height: 200px"/>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el : "#app",

            data : {

                path : "img/"

            }

        });

    </script>

</body>

运行结果：

每天进步一点点！

Vue学习之路第五篇：v-bind的更多相关文章

  1. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  2. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  3. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  4. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  5. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

  6. Vue学习之路第七篇：跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  7. Vue学习之路第四篇：v-html指令

    上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...

  8. vue学习指南：第五篇(详细) - vue的 computed、methods、watch 的区别？

    Computed 计算属性 1. 将函数代码块中返回的结果 赋值 给前面的方法名 2. computed 中的属性有缓存功能,只要data中的数据不发生改变,计算得到的新属       性就会被缓存下 ...

  9. 后端开发者的Vue学习之路（五）

    目录 上节内容回顾 使用第三方组件库 如何发起请求 请求错误处理 请求带参 以get的方式带参: 以post的方式带参: 封装处理 请求的配置 axios实例 实现调用自定义函数来发起请求 抽取axi ...

随机推荐

  1. 移动端使用rem时候动态设置html字体大小

      !(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in ...

  2. 2、Ansible配置文件详解

    0.配置文件 两个核心文件:ansible.cfg和hosts文件,默认都存放在/etc/ansible目录下. ansible.cfg:主要设置一些ansible初始化的信息,比如日志存放路径.模块 ...

  3. --- Error: failed to execute '.\ARMCC\bin\ArmAsm'

    1.KEIL4在开发STM32程序时报: Error: failed to execute '.\ARMCC\bin\ArmAsm' 或是Error: failed to execute '.\ARM ...

  4. mybatis入门截图二

    -------------------- 线程不安全问题 首先明白什么是线程不安全: 举例:struts2中,每个action中都定义了model模型对象(action类中是全局对象的存在  数据域属 ...

  5. Google NewSQL之Spanner

    谷歌分布式三宝 BigTable.GFS.MapReduce这传说中的谷歌分布式三驾马车,虽然谷歌没有公开具体实现代码,但却公布了相应论文,对分布式文件系统.大数据挖掘和NoSQL流行起了重大促进作用 ...

  6. 一点一点学架构(四)—Spring.NET错误Cannot Resolve Type……

    背景 在搭建完项目框架之后,当我利用单元測试来測一条线时.出现了下面错误: Cannot resolve type[--]for object with name 'ButtonBll' define ...

  7. ASP.NET—011:JavaScript报错常见问题

    相信大家都写过JavaScript.JS由于语法以及自己须要实现的业务的原因,可能在一个页面上要写长篇大论.或者单独写js文件写了好几百K.JS不可否认给Web编程带了很多的方便. 可是假设JS发生了 ...

  8. js面向对象编程：怎样实现方法重载

    js中怎样实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的參数arguments 3怎样利用arguments实现方法重载 1同名函数的调用问题 都知道在js中假设存在多个名称同样 ...

  9. WEEX SDK集成到工程(Integrate to Android) #25

    WEEX SDK集成到工程(Integrate to Android) #25 https://github.com/weexteam/article/issues/25

  10. 一个登录页面的spring 逻辑过程

    1.首先用户访问login.jsp 2.用户在登录页面输入用户名/密码,提交表单到服务器,Spring根据配置调用LoginController控制器响应登录请求(关键) 3.LoginControl ...