<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.classA {
color: pink;
}
.classB {
background: skyblue;
}
.classC {
font-size: 20px;
}
</style>
</head>
<body>
<div id="demo">
<h2>1. class绑定: :class=''</h2>
<p class="classC" :class="myClass">喜欢,可以关注点赞</p>
<p :class="{classA: hasA, classB: hasB}"> 谢谢</p>
<p :class="['classA', 'classB']">期待你的点赞和关注</p>
<h2>2. style绑定</h2>
<p :style="{color: activeColor, fontSize: fontSize + 'px'}">期待您的关注哦</p>
<hr>
<button @click="update">点击查看变化</button>
</div>
<script type="text/javascript">
const vm = new Vue({
data () {
return {
myClass: 'classA',
hasA: false,
hasB: true,
activeColor: 'green',
fontSize: 20
}
},
methods: {
update () {
this.myClass = 'classB'
this.hasA = !this.hasA
this.hasB = !this.hasB
this.activeColor = 'orange'
this.fontSize = 60
}
}
})
vm.$mount('#demo')
</script>
</body>
</html>
运行结果:
点击后的变化:
大家可以自己尝试运行一下。