VueJS样式绑定v-bind:class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
动态切换多个 class
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
</div> <script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})
</script>
</body>
</html>
text-danger 类背景颜色覆盖了 active 类的背景色.实际渲染后如下：
<div class="static active text-danger"></div>
将样式绑定到对象
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"></div>
</div> <script>
new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
})
</script>
</body>
</html>
以上效果都是一样的，如下图：
computed 对象属性
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"></div>
</div> <script>
new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
})
</script>
</body>
</html>
效果为绿色。
数组语法[]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div> <script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
</body>
</html>
效果为红色。
三元表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
width: 100px;
height: 100px;
background: red;
}
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div> <script>
new Vue({
el: '#app',
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
</body>
</html>
效果为绿色。
VueJS样式绑定v-bind:class的更多相关文章
- vuejs样式绑定
第一种:class的对象绑定,class引用的是一个对象,这个对象的属性显示不显示由变量决定 <style> .activated{ color:red; } </style> ...
- VueJS样式绑定之内联样式v-bind:style
我们可以在 v-bind:style 直接设置样式: 直接添加样式属性 HTML <!DOCTYPE html> <html> <head> <meta ch ...
- VueJS样式绑定:v-bind
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- wpf样式绑定 行为绑定 事件关联 路由事件实例
代码说明:我要实现一个这样的功能 有三个window窗口 每个窗体有一个label标签 当我修改三个label标签中任意一个字体颜色的时候 其他的label标签字体颜色也变化 首先三个窗体不用 ...
- 2019-3-16-win10-uwp-在-ItemsPanelTemplate-里面通过样式绑定-Orientation-显示方向
title author date CreateTime categories win10 uwp 在 ItemsPanelTemplate 里面通过样式绑定 Orientation 显示方向 lin ...
- 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
- 【WIN10】绑定x:Bind
在WP8.WP8中,我们知道有一个绑定{Binding},而在Win10中,新增了一个绑定{x:Bind} x:Bind :为编译时绑定 ,内存.内存相对于传统绑定都有优化 特性: 1.为强类型 ...
- 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
随机推荐
- iOS-app发布证书和调试证书配置
iOS-app发布证书.真机调试证书.测试证书.推送证书详细过程 更重要的是让你彻底明白为什么要这样配置证书 说句废话:凡事当你弄清楚为什么时,就揭开了它复杂和神秘的面纱 正文开始 一:发布证书 遵旨 ...
- bzoj 3704 昊昊的机油之GRST 贪心dp，思维
昊昊的机油之GRST Time Limit: 10 Sec Memory Limit: 1024 MBSubmit: 80 Solved: 33[Submit][Status][Discuss] ...
- vue-element-admin开发模式下style标签热更新失效[解决办法]
参考:https://forum.vuejs.org/t/vue-cli-3-x-style/46306/3 vue.config.js添加配置 css: { sourceMap: false, mo ...
- pat 甲级 团体天梯 L3-004. 肿瘤诊断
L3-004. 肿瘤诊断 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 在诊断肿瘤疾病时,计算肿瘤体积是很重要的一环.给定病灶 ...
- ANT总结
1 Ant是什么? Apache Ant 是一个基于 Java的生成工具.生成工具在软件开发中用来将源代码和其他输入文件转换为可执行文件的形式(也有可能转换为可安装的产品映像形式).随着应用程序的生成 ...
- 【HDOJ5558】Alice's Classified Message（后缀数组）
题意:给定一个长度为n的下标从0开始的小写字母字符串,每次对于当前的i寻找一个j使得后缀i与后缀j的lcp最大,(j<i)若lcp相同则取较小的 若lcp为0则输出0与当前字符,i自增1,否则输 ...
- GC+JVM
1.内存管理模型 ①以对象的方式管理内存,每个对象占据内存中连续的一段,分配在堆中.对象引用可以指向堆中的其他对象.非基本数据类型的对象等价于数据引用. ②基于栈和堆的内存管理都是动态分配,即在运行时 ...
- ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: YES)
ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO) ERROR 1045 (28000 ...
- [LeetCode] Longest Common Prefix 字符串公有前序
Write a function to find the longest common prefix string amongst an array of strings. Hide Tags Str ...
- poj 3281 Dining 拆点 最大流
题目链接 题意 有\(N\)头牛,\(F\)个食物和\(D\)个饮料.每头牛都有自己偏好的食物和饮料列表. 问该如何分配食物和饮料,使得尽量多的牛能够既获得自己喜欢的食物又获得自己喜欢的饮料. 建图 ...