学习VUE第五天课程（VUE之v-bind类名与样式绑定——上篇）

最新推荐文章于 2021-12-05 22:09:43 发布

web 沐

最新推荐文章于 2021-12-05 22:09:43 发布

阅读量161

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45582846/article/details/102554247

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

课程大纲

（1）v-bind回顾
（2）class-对象语法
（3）class-数组语法
（4）内联样式style-对象语法
（5）内联样式style-计算属性语法

DOM元素经常动态绑定一些类名或者style样式，本节讲解下使用
v-bind指令绑定class与style的多种方法。
之前介绍过v-bind基本用法及语法糖，主要用于动态更新HTML
元素属性，接下来简单回顾下。

v-bind回顾

v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
在这里插入图片描述

语法格式1：单个语法格式
v-bind:attributeName=variable
语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
案例：在页面中利用Vue实例的变量制作一个超级链接
语法格式3：数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”
案例（绑定类名）：

class-对象语法-单类名切换

给v-bind:class设置一个对象，可以动态切换class。
语法：传给 v-bind:class 一个对象，以动态地切换 class：
在这里插入图片描述
isActive为true时，结果为

isActive为false时，结果为

上面案例中，类名active依赖于数据isActive。当其值为true时，div拥有该类名active，为false时则没有

除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。例如：
v-bind:class 指令也可以与普通的 class 属性共存，例如：
绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来，例如：
对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。

以下为源码 HTML部分

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>demo</title>
		<link rel="stylesheet" type="text/css" href="css/VUE之v-bind类名与样式绑定.css" />
	</head>
	<body>
		<div id="app">
			<div v-bind:class="itsClass">背景颜色</div>
			<button @click="change">变色</button>
		</div>
	</body>
</html>
<script src="../vue10.9练习/js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/VUE之v-bind类名与样式绑.js" type="text/javascript" charset="utf-8"></script>

css 代码

/* 代码初始化 */
* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

/* 代码主体 */
#app > div{
	width: 100px;height: 100px;
}
#app > .green{
	background: green;
}
#app > .red{
	background: red;
}

js 代码

new Vue({
	el: '#app',
	data: {
		itsClass: {
			green: true
		}
	},
	methods: {
		change: function() {
			this.itsClass.green = false;
			this.itsClass.red = true;
		}
	},
})

当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。
当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表，例如。

class-数组语法-表达式1

可以使用三元/目运算符来根据条件切换class，例如

class-数组语法-表达式2

案例2：例如
在这里插入图片描述

class-数组语法-数组对象嵌套

当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法，如下：
在这里插入图片描述

class-数组语法-计算属性

与对象语法一样，当:class的表达式过长或者逻辑复杂时，可以绑定计算属性computed，这是一种友好且常见的语法。
在这里插入图片描述
使用计算属性给元素动态设置类名，在业务里经常遇到，尤其在表达式较长或者逻辑复杂时，推荐使用计算属性。

内联样式style-对象语法

v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

内联样式style-对象包裹语法

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里，以data为例，修改上面案例：

内联样式style-计算属性语法

在这里插入图片描述

如有疑问或者问题请留言联系小编！！！！！

感谢来访！！

web 沐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习VUE第五天课程（VUE之v-bind类名与样式绑定——上篇）

课程大纲（1）v-bind回顾（2）class-对象语法（3）class-数组语法（4）内联样式style-对象语法（5）内联样式style-计算属性语法DOM元素经常动态绑定一些类名或者style样式，本节讲解下使用v-bind指令绑定class与style的多种方法。之前介绍过v-bind基本用法及语法糖，主要用于动态更新HTML元素属性，接下来简单回顾下。v-bind...
复制链接

扫一扫

专栏目录