v-bind

v-bind绑定数据和元素的属性

1. 内联样式的数组语法

    <p :style="[finalSize,finalColor]">{{message}}</p>
   
   

     data:{
             message:'hello',
            finalSize: {fontSize:'100px'},
            finalColor: {color:'pink'}
          }
   

2. 内联样式的对象语法(不常用)

      <p :style=initStyle>{{message}}</p>
   

    data:{
             message:'hello',
             initStyle :{
               fontSize: '100px',
               color: 'pink'
            }
          }
   

3. 动态绑定class

   <p v-bind:class="{isActive:value}">{{message}}</p>
   <button v-on:click="change">转换</button>
   

    data:{
            message:'hello',
            value:true
          }
   

     methods:{
            change(){
              this.value = !this.value
            }