不多說，代碼如下，通過數組與對象的形式來完成樣式的綁定與變動,
以下實現點擊字體顏色變紅再點擊變黑的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的樣式綁定</title>
<script src="vue.js"></script>
<style type="text/css">
.class111{
color:red;
}
</style>
</head>
<body>
<div id = 'app2'>
<div :class = "{class111:enabled}" @click="changeColor">你好啊1</div>
<div :class = "[class222]" @click="changeColor2">你好啊2</div>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
enabled:false,
class222:""
},
methods:{
changeColor:function(){
this.enabled = !this.enabled;
},
changeColor2:function(){
this.class222 = this.class222 === ""?"class111":"";
}
}
});
</script>
</body>
</html>
有疑問歡迎評論