Vue2.0 【第一季】第7节 v-bind指令
Vue2.0 【第一季】 第7节 v-bind指令
第7节 v-bind指令
v-bind是处理HTML中的标签属性的
例如,我们绑定img上的src属性,进行动态赋值:
html文件:
<div id="app">
<img v-bind:src="imgSrc" width="200px" />
</div>
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值,这个值是在vue构造器里的data属性中找到的。
js文件:
var app = new Vue({
el:'#app',
data:{
imgSrc:'http://a0.att.hudong.com/78/52/01200000123847134434529793168.jpg'
}
});
我们在data对象在中增加了imgSrc属性来供html调用。
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写方法,用冒号代替 -->
<a :href="url"></a>
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式:
在绑定CSS样式时,绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
html代码:
<div :class="className">1、绑定class</div>
style中的css样式:
<style>
.classA{
color: red;
}
</style>
js代码:
var app = new Vue({
el:'#app',
data:{
className:'classA',
}
});
浏览器效果:
2、绑定classA并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。
html代码:
<div :class="{classA:isOk}">2、绑定Class中的判断</div>
CSS同上;
js代码:
var app = new Vue({
el:'#app',
data:{
isOk:true
}
});
浏览器效果:
另:
html代码:
<div :class="{classA:isOk}">2、绑定Class中的判断</div>
<hr>
<div>
<input type="checkbox" id="isOk" v-model="isOk">
<label for="isOk">isOk={{isOk}}</label>
</div>
CSS样式不变;
js代码不变
浏览器效果:
3、绑定class中的数组
html代码:
<div :class="[classA,classB]">3、绑定class中的数组</div>
js代码:
var app = new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB'
}
});
浏览器效果:
4、绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
CSS不变;
js代码:
var app = new Vue({
el:'#app',
data:{
isOk:false, //false实现classB样式,true实现classA样式
classA:'classA',
classB:'classB'
}
});
浏览器效果:
5、绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
CSS不需;
js代码:
var app = new Vue({
el:'#app',
data:{
red:'red',
font:'20px'
}
});
浏览器效果:
6、用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>
js代码:
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
浏览器效果:
Vue2.0 【第一季】第7节 v-bind指令的更多相关文章
- 分布式压测系列之Jmeter4.0第一季
1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- v:bind指令对于传boolean值的注意之处
1,
- Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once
目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...
- Vue2.0 【第一季】第6节 v-model指令
目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...
- Vue2.0 【第一季】第5节 v-on:绑定事件监听器
目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...
- Vue2.0 【第一季】第4节 v-text & v-html
目录 Vue2.0 [第一季]第4节 v-text & v-html 第四节 v-text & v-html Vue2.0 [第一季]第4节 v-text & v-html 第 ...
- Vue2.0 【第一季】第3节 v-for指令:解决模板循环问题
目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...
- Vue2.0 【第一季】第2节 v-if v-else v-show 指令
目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令 第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使 ...
随机推荐
- Gas Station(Medium)
1.在做pat的to fill or not to fill的时候想起同样是加油站的题目,于是翻出来复习一下 2.关键在于理解潜在的条件.假设油量为tank,如果到了当前站i,tank<0,即不 ...
- cs231n spring 2017 lecture13 Generative Models
1. 非监督学习 监督学习有数据有标签,目的是学习数据和标签之间的映射关系.而无监督学习只有数据,没有标签,目的是学习数据额隐藏结构. 2. 生成模型(Generative Models) 已知训练数 ...
- hadoop-2.5.2 源码学习1
- 吴裕雄--天生自然python学习笔记:beautifulsoup库的使用
Beautiful Soup 库简介 Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能.它是一个工具箱,通过解析文档为用户提供需要抓取的数据,因为简 ...
- 通过samus驱动实现基本数据操作
传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由(database).集合(collection).文档对象(documen ...
- 《软件自动化测试开发-Java和Python测试开发实用指南》出版了
1.关于书中下载链接的问题:出现404,页面不存在 解答:大小写要区分,l和1不能弄错了 2.关于勘误,出现极个别漏子少字错字 解答:后续版本会改进,目前能理解就好了 ---------------- ...
- Python建立web静态服务器
原文地址:http://www.bugingcode.com/blog/python_html_web_server.html python作为工具,提供了很多好用的命令,比如有时候突然需要建立一个解 ...
- B站实战第三天
B站实战第三天 用了两天多的时间才把B站页面的头部写完,今天来写头部下面的导航栏部分和轮播图一些模块. 因为还没学js,轮播图部分用swiper来实现. 今天首先复习的知识点是弹性盒模型. 弹性盒模型 ...
- PyMuPDF库(处理PDF)
昨天在公司需要把一份PDF格式认证表转换为图片JPEG格式,所以在网上查询了一些与此相关的python库,最后看网上大多都是使用Wand和PyMuPDF,在安装了Wand库后,导入相应的模块后报错了, ...
- 一起了解 .Net Foundation 项目 No.9
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. DLR/IronPytho ...