使用[] 绑定的是变量,{}绑定数据
<!--
class对象绑定
20190819
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fontsize{
color: red
}
</style>
</head>
<body>
<div id='app'
:class='[isActived]'
@click='onHandleClick'>
Hello !
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
isActived:'' //代表class式样字符串,[]表示变量
},
methods:{
onHandleClick:function(){
if(this.isActived === 'fontsize')
{
this.isActived = '';
}else{
this.isActived = 'fontsize';
}
}
}
})
</script>
</html>
<!--
class对象绑定
20190819
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fontsize{
color: red
}
</style>
</head>
<body>
<div id='app'
:class='{fontsize: isActived}'
@click='onHandleClick'>
Hello !
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
isActived:false //决定class式样是否显示
},
methods:{
onHandleClick:function(){
this.isActived = !this.isActived;
}
}
})
</script>
</html>