0
点赞
收藏
分享

微信扫一扫

绑定样式(class)

洲行 2022-12-10 阅读 142

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<style>
.class1 {
width: 100px;
height: 100px;
border: 5px solid pink;
}
.class2 {
width: 100px;
height: 100px;
background-color: red;
}
.class3 {
width: 100px;
height: 100px;
background-color: blue;
}
.class4 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 1.绑定class样式---字符串写法,适用于:样式的类目不确定,需要动态指定 -->
<!-- <div id="root" class="class1" :class="class2" @click='changeMood'></div> -->
<!-- 2.绑定class样式---数组写法,适用于:class类名个数和名字都不确定 -->
<!-- <div id="root" class="class1" :class='arr' style="margin-top: 20px;"></div> -->
<!-- 3.绑定class样式---对象写法,适用于class类名个数确定,名字确定,但是动态确定用不用 -->
<!-- <div id="root" class="class1" :class='obj' style="margin-top: 20px;"></div> -->
<!-- 4.绑定class样式---style写法 -->
<div id="root" class="class1" :style='style' style="margin-top: 20px;">变色</div>
<script>

Vue.config.productionTip = false
new Vue({
el : '#root',
data:{
name:'big',
class2:'class2',
arr:['class2','class3','class4'],

obj:{
class3:true,
class4:true
},

style:{
fontSize : '50px',
color:'red',
}
},
methods:{
//1.需求1:随机点击
changeMood(){
var arr = ['class2','class3','class4']
var index =Math.floor(Math.random()*3)
this.class2 = arr[index]
},
},

})
</script>

</body>
</html>

 

举报

相关推荐

0 条评论