Vuejs之路之--style和class的绑定

最新推荐文章于 2023-07-02 10:37:24 发布

初心鸿鹄

最新推荐文章于 2023-07-02 10:37:24 发布

阅读量405

点赞数

分类专栏： javacsript Vue 文章标签： class vue 绑定

本文链接：https://blog.csdn.net/codesWay/article/details/77065674

版权

javacsript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Vue

16 篇文章 0 订阅

订阅专栏

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind 处理它们，在 v-bind 用于 class 和 style 时，表达式的结果类型除了字符串之外，还可以是对象或数组。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绑定class</title>
	<style type="text/css">
		.addback{
			background:#fff;
		}
		.fontColor{
			color: yellow
		}
		.bold{
			font-weight: 200
		}
		.think{
			font-style: italic
		}
		.apps{
			color: green
		}
		.apps1{
			font-weight: 600
		}
	</style>
</head>
<body>
	<div id="container">
		<!--对象方式： 当condition1为真的时候，才会为该元素添加class名addback,否则就不添加，如果要控制多个class名只需要将其用逗号隔开就行了 -->
		<h2 class="banner" :class ="{addback:condition1,fontColor:condition1}">{{link}}</h2>
		<h2 class="banner" :class ="{addback:condition2}">{{link}}</h2>

		<!-- 当然也可以直接绑定数据里的对象，因为最终还是个对象，本身就是对象 -->
		<h3 :class="decoration">{{link}}</h3>

		<!-- 当然我们也可以绑定为返回对象的计算属性（return出来的是一个对象，结合上文容易理解） -->
		<button v-on:click = "changeClass">切换class</button>


		<!--数组方式： 当然我们也可以绑定为一个数组,数组的元素是将要应用的class类名的键 -->
		<h3 :class = "[st1,st2]">{{link}}</h3>

		<!-- 我们还可以在数组里面利用三元表达式,condition1为真的时候返回是st1，否则返回 "",其实最终还是数组的形式，只不过加了一些判断条件 -->
		<h3 :class = "[condition1 ? st1:'',st2]">{{link}}</h3>

		<!--数组和对象： 我们还可以在数组形式中利用对象形式--结果是添加了class类名fontColor和apps -->
		<h3 :class = "[{fontColor:condition1},st1]">{{plan}}</h3>
		<!-- 其实绑定class类名还可以用在组件上,但是用法是一样的只不过你在组件上班绑定的class类名将最终绑定在根元素上，其他的也没什么 -->
	</div>
	<script type="text/javascript" src = "https://unpkg.com/vue"></script>
	<script type="text/javascript">
		var vue = new Vue({
			el:"#container",
			data:{
				condition1:true,
				condition2:false,
				link:"巡检系统" ,
				plan:"中午饭吃啥？",
				decoration:{
					bold:true,
					think:true
				},
				// 数组形式；
				st1:"apps",
				st2:"apps1"
			},
			methods:{
				changeClass:function(){
					// alert(1)
					if(this.condition1){
						this.condition1 = false
					}else if(!this.condition1){
						this.condition1 = true
					}
				}
			}
		})
	</script>
</body>
</html>

其实绑定class类名还可以用在组件上,但是用法是一样的只不过你在组件上班绑定的class类名将最终绑定在根元素上，其他的也没什么。

总之：

对象方式：

1.当condition1为真的时候，才会为该元素添加class名addback,否则就不添加，如果要控制多个class名只需要将其用逗号隔开就行了。

2.也可以直接绑定数据里的对象，因为最终还是个对象，本身就是对象。

3.当然我们也可以绑定为返回对象的计算属性（return出来的是一个对象，结合上文容易理解）

数组方式：当然我们也可以绑定为一个数组,数组的元素是将要应用的class类名的键，我们还可以在数组里面利用三元表达式
数组和对象：我们还可以在数组形式中利用对象形式

初心鸿鹄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs之路之--style和class的绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind 处理它们，在 v-bind 用于 class 和 style 时，表达式的结果类型除了字符串之外，还可以是对象或数组。直接上代码：绑定class .addback{ background:#fff; } .fontColor{ color:
复制链接

扫一扫

专栏目录