课程大纲
(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为例,修改上面案例: