console
new Vue({
el: '#app',
data: {
attachRed: false,
color: 'green',
width: 150
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
blue: !this.attachRed
};
},
myStyle: function() {
return {
backgroundColor: this.color,
width: this.width + 'px'
};
}
},
methods: {
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attachRed"
:class="divClasses"></div>
<div class="demo" :class="{red: attachRed}"></div>
<div class="demo" :class="[color, {red: attachRed}]"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">
<hr>
<div class="demo" :style="{backgroundColor: color}"></div>
<div class="demo" :style="myStyle"></div>
<hr>
<div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
</div>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}