您现在的位置是:群英 > 开发技术 > web开发
v-bind动态绑定属性class的方法和代码是什么
Admin发表于 2022-11-19 17:51:53492 次浏览
这篇文章主要给大家介绍“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就是对应着增加和移除该类,取值是truefalse

  • 若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的方法和代码是什么已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: 动态绑定属性
相关信息推荐
2022-05-06 17:46:57 
摘要:本篇文章给大家介绍怎样在html中给文本添加有序列表与无序列表,我们一起看看怎么做。
2022-06-28 17:16:15 
摘要:Golang是可以开发Web程序的,不仅可以而且非常适合,该语言已经有很多Web框架,如Beego、Gin、Iris、Echo、Martini等,这些框架都是一些成熟的框架,可以帮助用户快速开发Web程序。
2022-06-16 09:25:24 
摘要:5种方法:1、用“array_pop($arr)”语句,删除最后一个元素并返回该值;2、用“end($arr)”,返回最后一个元素的值;3、用“array_slice($arr,-1)”;4、用“$arr[count($arr)-1]”等。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部