Vue2.0学习—class与style绑定（三十八）
Posted 王同学要努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.0学习—class与style绑定（三十八）相关的知识，希望对你有一定的参考价值。
【Vue2.0学习】—class与style绑定（三十八）
一、理解
- 在应用界面中，某个元素的样式时变化的
class/style绑定就是专门用来实现动态样式效果的技术
二、class 绑定
:class='xxx'- 表达式是字符串:
'classA' - 表达式是对象:
classA:isA, classB: isB - 表达式是数组:
['classA', 'classB']
三、style 绑定
:style=" color: activeColor, fontSize: fontSize + 'px' "- 其中
activeColor/fontSize是data属性
<!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>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<style>
.basic
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: red;
.normal
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: rgb(239, 165, 165);
.happy
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: orange;
.sad
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: purple;
.box1
width: 500px;
height: 200px;
border-radius: 50%;
background-color: pink;
.box2
width: 500px;
height: 200px;
border-radius: 50%;
background-color: rgb(230, 114, 133);
.box3
width: 500px;
height: 200px;
border-radius: 50%;
background-color: yellow;
</style>
<div id="root">
<!-- 绑定class样式 字符串写法 适用于样式的类名不确定 需要动态指定-->
<div class="basic" :class="mood" @click="change">
name
</div>
<hr>
<!-- 绑定class样式数组写法 适用于：要绑定的样式个数不确定 名字也不确定 -->
<div class="basic" :class="classarr">
name
</div>
<div class="basic" :class="qwe">
name
</div>
<br>
<!-- 绑定style样式 ：对象写法-->
<div class="basic" :style="styleObject">name
</div>
<br>
<br>
<!-- 绑定style样式数组写法 -->
<div class="basic" :style="styleArr">name</div>
</div>
<script>
const vm = new Vue(
el: '#root',
data:
name: '小王童鞋',
mood: 'normal',
classarr: ['box1', 'box2', 'box3'],
qwe:
box1: false,
box2: true
,
styleObject:
fontSize: '50px',
color: 'purple',
backgroundColor: 'skyblue'
,
styleArr: [
backgroundColor: 'blue'
,
fontSize: '60px'
]
,
methods:
change()
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
)
</script>
</body>
</html>
以上是关于Vue2.0学习—class与style绑定（三十八）的主要内容，如果未能解决你的问题，请参考以下文章