vue 绑定class、v-bind:style(对象语法、数组语法)
绑定 HTML Class
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
内联样式在模板里
<div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
<script type="text/javascript">
var vm1 = new Vue({
el: "#div1",
data: {
isActive: true,
hasError: true,
}
})
</script>
// 预览
<div id="div1" class="active text-danger"></div>
内联样式不在模板里
<div id="div2" :class="class_obj"></div>
<script type="text/javascript">
var vm2 = new Vue({
el: "#div2",
data: {
class_obj: {
isActive: true,
hasError: true,
}
}
})
</script>
————————————————
// 预览
<div id="div2" class="isActive hasError"></div>
绑定返回对象的计算属性
<div id="div3" v-bind:class="classObject"></div>
<script type="text/javascript">
var vm3 = new Vue({
el: "#div3",
data: {
isActive: true,
error: true
},
computed: {
classObject: function () {
return {
active: this.isActive && this.error,
'text-danger': this.error
}
}
}
})
</script>
————————————————
// 预览
<div id="div3" class="active text-danger"></div>
数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
class 列表
<div id="div4" v-bind:class="[activeClass, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
———————————————— // 预览 <div id="div4" class="active text-danger"></div>
class 列表使用三元表达式
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div5",
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
———————————————— // 预览 <div id="div5" class="active text-danger"></div>
class 列表使用对象语法
<div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div6",
data: {
isActive: true,
errorClass: 'text-danger'
}
})
</script>
————————————————
// 预览
<div id="div6" class="active text-danger"></div>
class 综合练习
<style>
.red {
color: red;
} .thin {
font-weight: ;
} .italic {
font-style: italic;
} .active {
letter-spacing: .5em;
}
</style> <body>
<div id="app">
<h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 -->
<h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 在数组中使用三元表达式 -->
<h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
<h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符 -->
<h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1> </div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
</script>
</body>
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表
<div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
msg: "我是数组绑定方法",
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
</script>
vue 绑定class、v-bind:style(对象语法、数组语法)的更多相关文章
- 在vue中使用watch监听对象或数组
最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...
- Vue教程：Class 与 Style 绑定（四）
绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...
- NO.04--我的使用心得之使用vue绑定class名
今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看: 一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <te ...
- 浏览器端-W3School-HTML：HTML DOM Style 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Style 对象 1.返回顶部 1. HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声 ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- vue - 绑定css、style
1.绑定html css1.1对象语法: 传给 v-bind:class 一个对象,以动态地切换 class <div v-bind:class="{ active: isActive ...
- void bind(String sName,Object object);――绑定：把名称同对象关联的过程
void bind(String sName,Object object);――绑定:把名称同对象关联的过程 void rebind(String sName,Object object);――重新绑 ...
- ch5-Class 与 Style 绑定(v-bind:class v-bind:style)
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式. 因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串. 不过,字符串拼接麻烦又易错.因此,在 v-b ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
随机推荐
- MAC使用二进制方式安装Mysql 5.7
一.参考文档: 二.基础环境: 系统:Centos7.4 mysql版本:percona mysql 5.7 三.部署mysql 1.初始化 mysqld --initialize --explici ...
- MySQL Explain命令详解--表的读取顺序，数据读取操作的类型等
表示索引中使用的字节数,可通过该列计算查询中使用的索引的长度(key_len显示的值为索引字段的最大可能长度,并非实际使用长度,即key_len是根据表定义计算而得,不是通过表内检索出的) 不损失精确 ...
- CVE-2018-19824漏洞学习
简介 在Linux内核4.19.6之前,本地用户可以通过在Sound / USB /card.c.的usb_audio_probe中错误处理一个恶意USB声音设备(没有接口)来利用ALSA驱动程序中的 ...
- 14款CSS3图片层叠切换动画
在线演示 本地下载
- Codeforces 1221D. Make The Fence Great Again
传送门 容易想到 $dp$,但是如果直接设 $f[i][j]$ 表示修正完前 $i$ 个位置,第 $i$ 个位置增加了 $j$ 高度显然是不行的 考虑有性质,发现每个位置只会被左右两个位置影响而改变, ...
- Erasing Substrings CodeForces - 938F (字符串dp)
大意: 给定字符串$s$, 长度为$n$, 取$k=\lfloor log2(n)\rfloor$, 第$i$次操作删除一个长度为$2^{i-1}$的子串, 求一种方案使得, $k$次操作后$s$的字 ...
- CentOS7部署Tomcat服务器
1. 软件 存放路径:/usr/local/src apache-tomcat-9.0.22.tar.gz openjdk-12_linux-x64_bin.tar.gz 2.事先配置 启动后关闭防火 ...
- JS基础_其他进制的数字（了解）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Qt 按键键值 与 相关字符串 的映射表(转)
Qt快捷键 映射 "Esc",/*Qt::Key_Escape 0x01000000 */ "Tab",/*Qt::Key_Tab 0x01000001 ...
- luogu P3826 [NOI2017]蔬菜
luogu 那个第一次购买有\(s_i\)奖励,可以看成是多一种蔬菜\(i+n\),权值为\(w_i+s_i\),每天减少量\(x\)为0个,保质期\(\lceil\frac{c_i}{x_i}\rc ...