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的其他属性，毕竟实践是最好的老师，写程序要勤动手。
下面我还要占用大家一点时间，讲解一个小知识点，先单独提取出一行代码进行剖析：
<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的更多相关文章
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue学习之路第七篇：跑马灯项目实现
前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...
- Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
- vue学习指南：第五篇(详细) - vue的 computed、methods、watch 的区别？
Computed 计算属性 1. 将函数代码块中返回的结果 赋值 给前面的方法名 2. computed 中的属性有缓存功能,只要data中的数据不发生改变,计算得到的新属 性就会被缓存下 ...
- 后端开发者的Vue学习之路（五）
目录 上节内容回顾 使用第三方组件库 如何发起请求 请求错误处理 请求带参 以get的方式带参: 以post的方式带参: 封装处理 请求的配置 axios实例 实现调用自定义函数来发起请求 抽取axi ...
随机推荐
- Python笔记17---------魔法方法
魔法方法也为特殊方法,即用两个下划线形成的(__方法__).自己定义的方法最好不要采用这种方式,因为这些方法会在一些特殊的情况下直接被调用. 1.第一个魔法方法:类中常用的__init__()方法:相 ...
- git 教程1
一. git简介 1.1 git是什么? 是一个分布式版本控制软件 1.2 git的作用是什么? 版本控制 ,团队协作 1.3 git的优势在哪里? 同类型的版本控制软件:CVS及SVN,Linus一 ...
- 【BZOJ2733】【HNOI2012】永无乡 - 线段树合并
题意: Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通 ...
- 编译htop
git clone https://github.com/hishamhm/htop cd htop ./autogen.sh ./configure make make install
- 常用前端布局，CSS技巧介绍
常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...
- Centos文件查看命令字符
文件(夹)查看类命令 ls--显示指定目录下内容 说明:ls 显示结果以不同的颜色来区分文件类别.蓝色代表目录,灰色代表普通文件,绿色代表可执行文件,红色代表压缩文件,浅蓝色代表链接文件. -a--- ...
- Ubuntu 15.10配置OpenCV
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50635705 1 安装前准备 安装以下 ...
- Unknown tag (s:property).
Unknown tag (s:property). 在jsp文件中加入此句话:<%@ taglib uri="/struts-tags" prefix="s&quo ...
- 经常使用的MySQL语句整理
本文參考:http://www.blogjava.net/bolo 部分自己补充,长期更新 MySQL的SQL语句写法,除了那些主要的之外,另一些也算比較经常使用的,这里记录下来,以便以后查找. 好记 ...
- Jasperreport+ireport 实践操作及web应用
Jasperreport+ireport 实践操作及web应用 学习完jasperreports+ireport,给我感觉深刻,不仅掌握了报表开发技术,还掌握了怎样在web中生成pdf,xls,r ...