Vue学习第n天

Vue中样式的绑定

话不多说上代码

<style>
.activated{
 color:red;
}
</style>
<div id = "app">
<div v-on: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>

通过一个样式的绑定实现的一个简单的点击改色代码；

知识点

Vue绑定class的几种方式
1.对象语法
给v-bind：class设置一个对象，可以动态地切换class，如下：

<div id = "app">
<div :class="{'active':isActive}">
        hello world</div>
</div>
<script>
var vm = new Vue({
   el:"#app",
   data:{
   isActive:true
  }
}）
</script>
 最终渲染的结果为：<div class="actived"></div>

类名active依赖于数据isActive,当其为true时，div会拥有类名active，为false时则没
2.对象中也可以传入多种属性，来动态切换class，另外，：class可以与普通的class共存

<div id = "app">
<div :class="{'active':isActive，'error'：isError}">
        hello world</div>
</div>
<script>
var vm = new Vue({
   el:"#app",
   data:{
   isActive:true,
   isError:false
  }
}）
</script>
最后的渲染结果为：<div class="active"></div>

当isError为true时，类名更新为<div class="active error"></div>

当class表达式过长或者逻辑复杂时，还可以绑定一个计算属性，，一般上当条件多余两个时，都可以使用data或者computed，例如

<div id = "app">
     <div :class="classes"></div>
</div>
<scrpit>
var vm = new Vue({
      el:"#app",
      data:{
      isActivite:true,
      isError:false
      },
      computed:{
        classes(){
         return{
           activite:this.isActivite&&!this.error,
           'text-fail':this.error&&this.error.type==='fail'
         }
        }
      }
})
</script>

2.数组方法
当需要多个class时，也可以使用数组语法，给：class绑定一个数组，应用一个class列表

<div id="app">
    <div :class="[active,error]"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        atvie:'active',
        error:'error'
    }
})
</script>
最终渲染结果为：<div class = "active error"></div>

也可以使用三元表达式来根据条件切换class，如：<div :class="[isActive ? activeCls : '',errorCls]"></div>
当isActivite为true时，样式active才会被应用；

同时我们也可以通过对象语法来实现，如<div :class="[{'active':isActive},errorCls]"></div>

绑定内联样式

对象语法

v-bind：style的对象语法。CSS属性名可以用驼峰式或者短横线分割（引号包裹起来）

<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>

对象赋值

 data:{
     activeColor:'red',
     fontSize:30
  }

但是通常将样式绑定到一个对象阅读型更好，如：

<div v-bind:style="styleObject"></div>

data:{
   styleObject:{
      color:'red',
      fontSize:'13px'
   }
}

同样的，对象语法常常结合返回对象的计算属性使用

数组语法
v-bind：style的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles,overridingStyles]"></div>