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 ...
随机推荐
- 【Linux开发】linux设备驱动归纳总结（四）：3.抢占和上下文切换
linux设备驱动归纳总结(四):3.抢占和上下文切换 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- TCP/IP 物理层卷四 -- 数据报与虚电路
一.数据报(Datagram) 1.1 概念 数据报是分组交换的一种,主要向通信子网中的端系统提供无连接的分组交换服务.通信子网的某主机发送一个报文时,无需建立连接,只需在实现高层协议的前提下对数据拆 ...
- 客户端实现WebService服务接口
首先,要获得搭建好的WebService服务的WSDL,如要实现国内手机号码归属地查询WEB服务,其WSDL为:http://ws.webxml.com.cn/WebServices/MobileCo ...
- jinja2 模板相关
安装 pip install jinja2 配置模板 settings.py 60行左右 TEMPLATES = [ { 'BACKEND': 'django.template.backends.dj ...
- Python 入门 之 包
Python 入门 之 包 1.包 (1)什么是包? 文件夹下具有_ init.py _的文件夹就是一个包 (2)包的作用: 管理模块(文件化) (3)包的导入: 导入: 启动文件要和包文件是同级 绝 ...
- PermissionError: [Errno 13] Permission denied: '/run/user/0/jupyter'
解决办法:需要给/run/user整个目录开放权限,不能单独给'/run/user/0/jupyter'这个文件,因为jupyter是需要往目录中添加文件,/run/user/0/jupyter,此时 ...
- Codeforces 1221B. Knights
传送门 看到棋盘上跳马,发现如果把棋盘黑白染色,那么每次移动都是从白点到黑点,从黑点到白点 所以直接根据黑白染色判断每个位置的马的颜色即可 #include<iostream> #incl ...
- leecode刷题（26）-- 用栈实现队列
leecode刷题(26)-- 用栈实现队列 用栈实现队列 使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从队列首部移除元素. peek() -- 返 ...
- 浅析java中clone（）方法
本文转载自:http://blog.csdn.net/mengxiangyue/article/details/6818611 Java中我们可能都遇到过这样的情况,在我们将一个对象做为参数传给一个函 ...
- ArcGis之popup列表字段自定义
ArcGis之popup列表字段自定义 featureLayer图层中可以使用popupTemplate属性添加弹窗. API:https://developers.arcgis.com/javasc ...