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 ...
随机推荐
- redis缓存雪崩
缓存雪崩 缓存雪崩,是指在某一个时间段,缓存集中过期失效. 产生雪崩的原因之一,比如在写本文的时候,马上就要到双十二零点,很快就会迎来一波抢购,这波商品时间比较集中的放入了缓存,假设缓存一个小时.那么 ...
- Spring实现构造注入
Spring通过setter访问器实现对属性的赋值,这种做法称为设值注入:Spring还提供了通过构造方法赋值的能力,称为构造注入.使用设值注入时,Spring通过JavaBean的无参构造方法实例化 ...
- Django基础之视图(views)层、模板层
目录 Django基础之视图(views)层.模板层 JsonResponse 向前端返回一个json格式字符串的两种方式 重写Django中的json的某个方法 form表单上传文件 FBV与CBV ...
- QVector与QMap查找效率实战（QMap快N倍，因为QVector是数组，QMap是有序二叉树，查找的时候是N和LogN的速度对比）
因为项目使用QVector,太慢了,听说QMap比QVector查找时快,所以写一个小程序试试: 从30000个数据中找5000个 程序运行截图如下: QVector QMap 一样的数据,找一样的数 ...
- oa_mvc_easyui_分页(4)
1.数据层的编写 NewListInfoDal.cs: GetPageEntityList方法,根据start,end取出数据 --row_number() over()函数查询 LoadEntity ...
- 雷赛DMC2410_入门篇
研究了一下雷赛的运动控制卡,还是花了一点时间,总算把步进电机转起来了,现在把整个过程分享给大家. 雷赛板卡型号很多,这里选择的是DMC2410,主要在于他的性价比,其他型号应该也差不多同样的原理,套装 ...
- SQL数据库字段数据类型详细说明
这里先总结数据类型.MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. 日期和时间数据类型 MySQL数据类型 含义 date 3字节,日期,格式:20 ...
- log4j2配置文件xml详细了解
log4j2配置文件xml详细了解 详细参考:https://www.cnblogs.com/new-life/p/9246143.html log4j 2.x版本不再支持像1.x中的.propert ...
- jQuery 遍历 - 后代
向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() find() jQuery children() 方法 children() 方法返回被选元素的 ...
- Swift(一)语言介绍
Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题. Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在其中 ...