一、class：
1，直接传递一个数组。注意：这里的class需要使用v-bind做数据绑定。
2，在数组中使用表达式
3，在数组中使用对象来代替三元表达式，提高代码的可读性
4，在为class使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，也可不带引号，属性的值是一个标识符。
二、style
1，直接在元素上通过’:style’的形式，书写样式对象
2，将样式对象，定义到’data’中，并直接引用到‘:style’中
3，在’:style’中通过数组，引用多个’data’上的样式对象
class代码演示：（直接复制到HTML即可运行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-知识点补充class</title>
<style>
.box1{
width: 300px;
height: 40px;
border: 1px solid olive;
}
.box2{
/* background-color: bisque; */
font-size: 30px;
}
.box3{
background-color: bisque;
}
</style>
</head>
<body>
<div id="app">
<p class="box1 box2">众里寻他千百度......</p>
<p :class="['box1', 'box2']">众里寻他千百度......</p>
<p :class="['box1', 'box2', isShow ? 'box3': '' ]">众里寻他千百度......</p>
<p :class="[{'box1':isShow}]">众里寻他千百度......</p>
<p :class="classObj">众里寻他千百度......</p>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
isShow:true,
classObj:{'box1':true,'box2':true,'box3':true}
}
})
</script>
</body>
</html>运行效果：
style演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-知识点补充style</title>
</head>
<body>
<div id="app">
<p style="font-size: 20px; background-color: aquamarine;">hhhhh哈哈哈哈你是谁呀</p>
<p :style="style1">hhhhh哈哈哈哈你是谁呀</p>
<p :style="[style1,style2]">hhhhh哈哈哈哈你是谁呀</p>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
style1:{'background-color':'green','font-size':'40px'},
style2:{'font-style':'italic'}
}
})
</script>
</body>
</html>运行效果：
版权声明：本文为Annaluo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。