1. class样式
- 写法:class=“xxx” xxx可以是字符串,对象,数组
- 字符串写法适用于:类名不确定,要动态获取
- 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
- 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
(1)绑定class样式----字符串写法。适用于:样式的类名不确定,需要动态指定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定class样式</title>
<style>
.basic {
width: 300px;
height: 100px;
border: 1px solid black;
}
.happy {
width: 300px;
height: 100px;
background-color: rgba(325, 100, 0, 0.20);
}
.sad {
width: 300px;
height: 100px;
background-color: rgb(238, 223, 228);
}
.normal {
width: 300px;
height: 100px;
border: 1px solid #a7d55f;
}
.atguigu1 {
width: 300px;
height: 100px;
background-color: #90a8c3;
}
.atguigu2 {
width: 300px;
height: 100px;
background-color: #c390a7;
}
.atguigu3 {
width: 300px;
height: 100px;
background-color: #a22f2f;
}
</style>
<!-- 引入vue-->
<script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<!--准备一个容器-->
<div id="root">
<!-- 绑定class样式----字符串写法。适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成提示
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
mood: "normal",
},
methods: {
changeMood() {
const arr = ['happy', 'sad', 'normal']
//Math.floor:向下取整 Math.random:0-1区间,但不包括1,无限接近于1
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
}
})
</script>
</body>
</html>
(2)绑定class样式----数组写法。适用于:要绑定的样式个数不确定、名字也不确定
<body>
<!--准备一个容器-->
<div id="root">
<!-- 绑定class样式----数组写法。适用于:要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成提示
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
mood: "normal",
classArr: ['atguigu1', 'atguigu2', 'atguigu3']
}
})
</script>
</body>
(3)绑定class样式----对象写法。适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用
<body>
<!--准备一个容器-->
<div id="root">
<!-- 绑定class样式----对象写法。适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成提示
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
mood: "normal",
classObj: {
atguigu1: false,
atguigu2: false,
}
}
})
</script>
</body>
2. style样式
-
:style="{fontSize:xxx}"其中xxx是动态值
-
:style="[a,b]"其中a,b是样式对象
(1)绑定style样式----对象写法
<body>
<!--准备一个容器-->
<div id="root">
<!-- 绑定style样式----对象写法。 -->
<div class="basic" :style="styleObj">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成提示
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
mood: "normal",
styleObj: {
fontSize: '40px'
}
}
})
</script>
</body>
(2)绑定style样式----数组写法(不常用)
<body>
<!--准备一个容器-->
<div id="root">
<!-- 绑定style样式----数组写法(不常用) -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成提示
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
mood: "normal",
styleArr: [{
backgroundColor: "pink"
}, {
fontSize: '40px'
}]
}
})
</script>
</body>