绑定Class样式
image.png
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Class绑定</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="css/style.css" rel="stylesheet"> -->
</head>
<body>
<div class="mainbox">
<!-- 字符串写法 -->
<div class="basic" :class="className" @click="changeMood">{{name}}</div><br>
<!-- 数组写法 -->
<div class="basic" :class="arrNew" @click="changeArr">{{name}}</div><br>
<!-- 对象写法 -->
<div class="basic" :class="classObj" @click="changeObj">{{name}}</div><br>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el:'.mainbox',
data:{
name:'派大星',
className:'normal',
arrNew:['happy','sad','normal'],
classObj:{
happy:false,
sad:false,
}
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
this.className = arr[Math.floor(Math.random()*3)]
},
changeArr(){
// shift() 移出第一个
// this.arrNew.shift()
// push() 新增一个
this.arrNew.push('paidaxin')
},
changeObj(){
this.classObj.happy = !this.classObj.happy
}
},
})
</script>
</html>
image.png
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Class绑定</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="css/style.css" rel="stylesheet"> -->
</head>
<body>
<div class="mainbox">
<!-- 字符串写法 -->
<div class="basic" :class="className" @click="changeMood">{{name}}</div><br>
<!-- 数组写法 -->
<div class="basic" :class="arrNew" @click="changeArr">{{name}}</div><br>
<!-- 对象写法 -->
<div class="basic" :class="classObj" @click="changeObj">{{name}}</div><br>
<!-- style -->
<div class="basic" :style="styleObj" >{{name}}</div><br>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el:'.mainbox',
data:{
name:'派大星',
className:'normal',
arrNew:['happy','sad','normal'],
classObj:{
happy:false,
sad:false,
},
styleObj:{
fontSize:40+'px',
fontWeight:'bold',
}
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
this.className = arr[Math.floor(Math.random()*3)]
},
changeArr(){
// shift() 移出第一个
// this.arrNew.shift()
// push() 新增一个
this.arrNew.push('paidaxin')
},
changeObj(){
this.classObj.happy = !this.classObj.happy
}
},
})
</script>
</html>
