v-bind动态绑定属性class的方法和代码是什么
导读：这篇文章主要给大家介绍“v-bind动态绑定属性class的方法和代码是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考了解一下，希望这篇“v-bind动态绑定属性class的方法...
这篇文章主要给大家介绍“v-bind动态绑定属性class的方法和代码是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考了解一下，希望这篇“v-bind动态绑定属性class的方法和代码是什么”文章对大家有所帮助。
v-bind可以动态设置class属性，用以实现动态样式。写法：
!--完整写法-->
标签名 v-bind:class="vue实例中的数据属性名"/>
!--简化写法-->
标签名 :class="vue实例中的数据属性名"/>
登录后复制 一、v-bind动态绑定class属性（对象语法）
动态绑定class属性之后，class的值是一个变量，可以将它放到data中动态绑定样式，以动态地切换 class。（学习视频分享：vue视频教程）
1、直接通过{
}
绑定一个或多个类
v-blid:class的属性中可以传入一个对象，对象中包括一组组键值对
:class= "{
key1：value1，key2：value2...}
" 登录后复制 类名就是对应的样式，也就是键（key）；value就是对应着增加和移除该类，取值是true和false
若value值为
true，则该key样式起作用若value值为
false，则该key样式不起作用
!-- 样式 -->
style>
.color {
color: red;
}
.background {
background-color: pink;
}
/style>
登录后复制 div id="app">
h2 class="color">
{
{
message}
}
/h2>
!-- 第一种：直接用style中的样式，固定写死； -->
h2 v-bind:class="color">
{
{
message}
}
/h2>
!-- 第二种：用指令v-bind,class的属性值color为变量； -->
!-- vue解析，变量对应data中color属性值，则用了color的样式； -->
h2 v-bind:class="{
color:isColor, background:isBackground}
">
{
{
message}
}
/h2>
!-- 第三种：用指令v-bind；后面接对象{
key1：value1，key2：value2}
-->
!-- isColor为false则color样式不起作用。 -->
!-- isBackground为true则background样式起作用。 -->
/div>
script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
color:"color",
isColor:false,
isBackground:true
}
}
)
/script>
登录后复制 v-bind:class 指令也可以与普通的 class 属性共存。
div
class="static"
v-bind:class="{
active: isActive, 'text-danger': hasError }
"
>
/div>
登录后复制 data: {
isActive: true,
hasError: true
}
登录后复制 当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 false，class 列表将变为 "static active"。
data: {
isActive: true,
hasError: false
}
登录后复制 2、绑定的数据对象不必内联定义在模板里，可绑定到一个类对象classObject
!-- 样式 -->
style>
.color {
color: red;
}
.background {
background-color: pink;
}
/style>
登录后复制 div id="app">
h2 v-bind:class="classObject">
{
{
message}
}
/h2>
!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
!-- color为true则color样式起作用。 -->
!-- background为false则background样式不起作用。 -->
/div>
script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
classObject: {
color: true,
background: false
}
}
}
)
/script>
登录后复制 3、也可以绑定一个返回对象的计算属性
div id="app">
h2 v-bind:class="classObject">
{
{
message}
}
/h2>
!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
!-- color为true则color样式起作用。 -->
!-- background为false则background样式不起作用。 -->
/div>
script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
isColor: true,
isBackground: true
}
,
computed: {
classObject: function () {
return {
color: this.isColor,
background: this.isBackground
}
}
}
}
)
/script>
登录后复制 4、class中的对象比较复杂，则直接放在一个methods中，然后调用这个函数，实现动态切换
!DOCTYPE html>
html>
head>
script type="text/javascript" src="../js/vue.js">
/script>
style>
.active{
background-color: pink;
}
.line{
color: red;
}
/style>
/head>
body>
div id="app">
h2 :class="getClasses()">
方法methods：{
{
message}
}
/h2>
h2 :class="classes">
计算属性computed：{
{
message}
}
/h2>
button v-on:click="btnClick">
按钮/button>
/div>
script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
isAcitve:true,
isLine:true
}
,
methods:{
btnClick: function () {
this.isAcitve = !this.isAcitve
}
,getClasses:function () {
return {
active:this.isAcitve,line:this.isLine}
}
}
,
computed: {
classes: function () {
return {
active:this.isAcitve,line:this.isLine}
}
}
}
)
/script>
/body>
/html>
登录后复制 二、v-bind动态绑定class属性（数组语法）
我们可以把一个数组传给 :class，以应用一个 class 列表；
数组语法格式为：
:class="[base1,base2]"
登录后复制 v-bind 动态绑定class 数组语法，就是直接给其传入一个数组，但是数组里面都是类名，数组中的类名，在页面中都会被加入到该标签上。通过数组内元素的增加或减少来实现，样式的改变。
注意：这里面的类名都需要用 ' ' 包裹起来，如果没有包裹起来，Vue会将其当成data里面的某个属性，而去data里面寻找，显然data里面是没有该属性的，那么报错也就来了。这一点在Vue中都是通用的，没加引号当成data里面的属性来处理
注：和对象语法一样，可以和普通的类同时存在，并不冲突
h2 class="title" :class="['active','line']">
{
{
message}
}
/h2>
登录后复制 示例：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
script src="../js/vue.js">
/script>
style>
.active{
color: red;
}
/style>
/head>
body>
div id="app">
h2 :class="['active','line']">
{
{
message}
}
/h2>
h2 :class="[active,line]">
{
{
message}
}
/h2>
h2 :class="[active,line]">
{
{
message}
}
/h2>
h2 :class="getClasses()">
方法methods：{
{
message}
}
/h2>
h2 :class="classes">
计算属性computed：{
{
message}
}
/h2>
/div>
script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
line:'bbbbbbbbbb'
}
,
methods:{
getClasses: function () {
return [this.active,this.line]
}
}
,
computed: {
classes: function () {
return [this.active,this.line]
}
}
}
)
/script>
/body>
/html>
登录后复制 如果你也想根据条件切换列表中的 class，可以用三元表达式：
div v-bind:class="[isActive ? activeClass : '', errorClass]">
/div>
登录后复制 这样写将始终添加 errorClass，但是只有在 isActive 是 true 时才添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
div v-bind:class="[{
active: isActive }
, errorClass]">
/div>
登录后复制 示例：
!DOCTYPE html>
html>
head>
script type="text/javascript" src="../js/vue.js">
/script>
style>
.aaa{
padding: 10px;
}
.active{
background-color: pink;
}
.line{
color: red;
}
/style>
/head>
body>
div id="app">
div :class="['aaa','active']">
{
{
message}
}
/div>
div :class="['aaa', nba, isActive? 'active': '']">
{
{
message}
}
/div>
div :class="['aaa', nba, {
'actvie': isActive}
]">
{
{
message}
}
/div>
/div>
script>
const app = new Vue({
el: '#app',
data() {
return {
message: "Hello World",
nba: 'line',
isActive: false
}
}
}
)
/script>
/body>
/html>
登录后复制 关于“v-bind动态绑定属性class的方法和代码是什么”的内容就介绍到这，感谢各位的阅读，相信大家对v-bind动态绑定属性class的方法和代码是什么已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： v-bind动态绑定属性class的方法和代码是什么
本文地址： https://pptw.com/jishu/652414.html