Vue2.0 【第一季】第7节 v-bind指令
2024-10-08 21:42:46
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'
}
}
})
浏览器效果:
最新文章
- let与const的区别
- C#加密解密大全
- IOS设计模式之一(MVC模式,单例模式)
- K - 4 Values whose Sum is 0(中途相遇法)
- 七周七语言——Prolog(二)
- java基础 (六)面向对象(一)
- Cause: net.sf.cglib.beans.BulkBeanException; nested exception is com.ibatis.common.jdbc.exception.NestedSQLException:
- Android开发学习之路--Android Studio cmake编译ffmpeg
- DAY2-MySQL专业安装
- SpringBoot + Shiro + shiro.ini 的踩坑记录
- 对node.js的理解?
- 面向对象【day08】:问答式面相对象(四)
- 早期(编译器)优化--javac编译器
- 2019.03.24 Ajax
- strcmp,stricmp
- random 产生一个随机数的方法
- HDFS 命令大全
- python 处理xml
- [ACM_水题] UVA 12502 Three Families [2人干3人的活后分钱,水]
- 可重入函数、线程安全、volatile
热门文章
- Word Flow:创造吉尼斯世界纪录的触屏文本输入的全新体验——微软Windows Phone 8.1系统倾情巨献
- cs231n spring 2017 lecture3 Loss Functions and Optimization
- FPGA浮点数定点数的处理
- JVM核心组成部分与作用介绍
- python3下scrapy爬虫(第一卷:安装问题)
- 最小生成树 HihoCoder-1097、1098、1109(最小生成树算法)
- montagy
- Docker Container开机自动启动
- scrapy爬虫框架教程(二)-- 爬取豆瓣电影
- Excel技巧:如何绘制一份优秀的甘特图(项目管理)