标签：引号 script bsp activate style play 对象 属性 size
一、动态绑定class
1、直接使用data数据
<style> .activated { color: red; } </style> <div id="app"> <div :class="activated" @click="handleDivClick"> Hello world </div> </div> <script> // var vm = new Vue({ // el: "#app", // data: { // isActivated: false // }, // methods: { // handleDivClick(){ // this.isActivated = !this.isActivated // } // } // }) var vm = new Vue({ el: "#app", data: { activated: "" }, methods: { handleDivClick: function(){ this.activated = this.activated === "activated" ? "" : "activated" } } }) </script>
2、多个类名用数组语法
<style>
.activated {
color: red;
}
.bg-color {
background: yellow;
}
</style>
<div id="app">
<div :class="[activated,bgColor]" @click="handleDivClick">
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activated: "",
bgColor: "bg-color"
},
methods: {
handleDivClick: function(){
this.activated = this.activated === "activated" ? "" : "activated"
}
}
})
</script>
3、class对象语法
<style> .activated { color: red; } </style> <div id="app"> <div :class="{activated: isActivated}" @click="handleDivClick"> Hello world </div> </div> <script> var vm = new Vue({ el: "#app", data: { isActivated: false }, methods: { handleDivClick(){ this.isActivated = !this.isActivated } } }) </script>
二、动态绑定style
style动态绑定的css，也是以对象的形式写出
<style>
.activated {
color: red;
}
.bg-color {
background: yellow;
}
</style>
<div id="app">
<div :style="styleObj" @click="handleDivClick">
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj:{
color: "black",
background: "yellow"
}
},
methods: {
handleDivClick(){
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
}
}
})
</script>
同样也可以通过数组，绑定多个对象，font-size写成属性可以写成fontSize, 或者font-size加单引号
<div :style="[styleObj,{fontSize:‘20px‘}]" @click="handleDivClick">
Hello world
</div>
标签：引号 script bsp activate style play 对象 属性 size
原文地址：https://www.cnblogs.com/shengjunyong/p/12150520.html
