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>

效果为绿色。

转载于:https://www.cnblogs.com/boonya/p/7092649.html

VueJS样式绑定v-bind:class相关推荐

VueJS样式绑定:v-bind
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
五十九、Vue中的样式绑定
@Author:Runsen @Date:2020/10/16 大四是一个焦虑的时期.烦恼有时候是具体问题带来的压力,有时候却是无端的.莫名其妙的,有时候还极易受到外界的影响,别人一句话就会激起内心难 ...
Angular属性绑定，class绑定，事件绑定，属性样式绑定
多谢大佬指正,原创转载连接. 属性绑定插值表达式:src="{{user.pic}}" 使用: [ ] :[property]="变量" 使用:bind-:b ...
Vue2利用分支、循环、属性样式绑定实现选项卡图片切换
课前准备带领大家学习分支(if.else).以及循环(for) 至于属性与样式绑定在上一篇文章已经讲解分支循环实现选项卡分支(if.else if.else) 主要指if.else if.e ...
vue条件渲染、列表渲染、样式绑定
vue 官网 ---- https://cn.vuejs.org/v2/guide/class-and-style.html 样式绑定 class绑定 1.对象语法 <div class=&qu ...
Attribute 绑定、类绑定和样式绑定
Attribute 绑定.类绑定和样式绑定 1. 绑定到 Attribute 优先设置带有 Property 绑定的元素的 Property.如果没有可绑定的元素 Property,可以使用 Attr ...
007_Vue style样式绑定
1. style样式绑定处理 1.1. 对象语法 <div v-bind:style="{width: '400px', height: '50px'}"></d ...
案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定
需求:实现简单的加法计算,分别输入数值a和数值b ,点击计算按钮,结果显示在下面. <!DOCTYPE html> <html lang="en"> < ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...

VueJS样式绑定v-bind:class

VueJS样式绑定v-bind:class相关推荐

最新文章

热门文章