vuejs样式绑定

第一种：class的对象绑定，class引用的是一个对象，这个对象的属性显示不显示由变量决定

<style>
　　.activated{
　　　　color:red;
　　}
</style>
<div id='app'>
　　<div @click = 'handleClick' :class='{activated: isActivated}'>
　　　　hello world
　　</div>
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　isActivated:false
　　　　},
　　　　methods:{
　　　　　　handleClick:function(){
　　　　　　　　this.isActivated = !this.isActivated
　　　　　　}
　　　　}
　　})
</script>

class是activated，而activated的显示不显示是由isActivated控制，isActivated为false,activated这个class不显示，isActivated为true,activated就显示

 

第二种：和数组绑定，这个数组里面绑定的是一个变量

<style>
　　.activated{
　　　　color:red;
　　}
</style>
<div id='app'>
　　<div @click = 'handleClick' :class='[activated]'>
　　　　hello world
　　</div>
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　activated:''
　　　　},
　　　　methods:{
　　　　　　handleClick:function(){
　　　　　　　　this.activated = (this.activated === 'activated' ? '' : 'activated');
　　　　　　}
　　　　}
　　})
</script>

和数组绑定，这个数组里面绑定的是一个变量，这个变量的值就是className,这个className的值由activated这个变量控制

第三种：通过样式style控制样式

<div id='app'>
　　<div @click = 'handleClick' :style='styleObj'>
　　　　hello world
　　</div>
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　styleObj:{
　　　　　　　　color:'black'
　　　　　　}
　　　　},
　　　　methods:{
　　　　　　handleClick:function(){
　　　　　　　　this.styleObj.color = (this.styleObj.color === 'red' ? 'black' : 'red');
　　　　　　}
　　　　}
　　})
</script>

style里面是个样式的对象，这个对象可以是变量，也可以直接写，看要不要控制他

style里面也可以是数组，:style='[styleObj]'也可以