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和一个对象的形式来解 ...
随机推荐
- 【WC笔记】字符串前沿算法
Q1 对于给定的字符串,求本质不同的子串数. A1 在加入 $s_l$ 时,考虑 $s[l:r]$ 的上一次出现是 $s[k:k+r-l]$,那么应该在线段树上 $[r,k+r-l]$ 这个区间 $+ ...
- python网络
try: import urllib.request as urllib2 except ImportError: import urllib2 response = urllib2.urlopen( ...
- react之只用classNames避免字符串拼接
之前在react当中使用了字符串拼接的方式来拼接类名的字符串,这种方法不仅不够方便,还会出现很多问题 使用classNames这个工具,可以省去拼接字符串的烦恼,大大提高开发效率 首先,最简单的使用方 ...
- C# 利用ICSharpCode.SharpZipLib.dll 实现压缩和解压缩文件
我们 开发时经常会遇到需要压缩文件的需求,利用C#的开源组件ICSharpCode.SharpZipLib, 就可以很容易的实现压缩和解压缩功能. 压缩文件: /// <summary> ...
- Docker学习之Docker Registry
前言 前面已经学习了怎样通过Dockerfile来构建我们自己的镜像了,但是一个系统可能包含着很多个微服务即有很多个镜像,当镜像越来越多的时候,就必须得有一个地方来管理这些镜像,Docker官方提供了 ...
- （二） Spring项目的搭建
传统的项目搭建,是将所依赖的第三方jar包复制到项目的类路径下.但是,这样带来的问题是,无法更好的对这些jar包进行动态管理. 目前主流的构建工具有:Ant.Maven.Gradle.以Maven为例 ...
- 常用 vim 命令总结
学习 vim ,是需要经常使用的,而这些命令,是我这段时间最常用的命令,很有效率的提高的我的文本编辑效率.----------------------------------------------- ...
- Manjaro linux软件源设置
1.从官方http://jaist.dl.sourceforge.net/project/manjarotest/16.06-dev/kde/minimal/manjaro-kde-minimal-1 ...
- hdu 4970 树状数组 “改段求段”
题意:塔防.给1--n,给出m个塔,每个塔有攻击力,给出k个怪兽的位子和血量,问有几只可以到达n点. 今天刚刚复习了树状数组,就碰到这个题,区间更新.区间求和类型.第三类树状数组可以斩. 注意一下大数 ...
- 牛客网 牛客小白月赛2 D.虚虚实实-无向图判欧拉路径
D.虚虚实实 链接:https://www.nowcoder.com/acm/contest/86/D 这个题是无向图判欧拉路径,首先要判是否连通,然后再判欧拉路径就可以,板子题. 板子来源: ...