vue.js中v-bind的使用

v-bind

v-bind可以用来进行属性绑定

<div id="app">
<input type="button" value="按钮" v-bind:title="mytitle">
</div>

var vm = new Vue({
   el:"#app",
   data:{
       msg:"这个是按钮"
   }
})

 v-bind:title 等价于 :title

使用v-bind修改class样式

• 使用数组修改样式

  <style>
     .text-color{
         color:red;
     }
     .text-font{
         font-size: 20px;
     }
  </style>
  <p :class="['text-color','text-font']">使用v-bind修改样式</p>
  

  显示效果：
  
• 使用三元表达式

  <div id="app">
  	<p :class="['text-color',isTrue?'text-font':'']">使用v-bind修改样式</p>
  </div>
  

    var vm = new Vue({
        el:"#app",
        data:{
            isTrue:false
        }
    })
  

  显示效果：
  
• 使用对象

  <div id="app">
  	<p :class="classObject">
  	        v-bind:class 指令
  	</p>
  </div>
  

    var vm = new Vue({
        el:"#app",
        data:{
           classObject:{
             'text-color':false,
             'text-font':true
         }
        }
    })
  

  显示效果：
  

使用v-bind修改css样式

• 内联式

  <div id="app" >
     <p :style="{'color':'red','font-size':'40px'}"></p>
  </div>
  

  显示效果：
  

• 在data中定义样式

<div id="app" >
  <h1 :style="[colors,width]">
        style
  </h1>	
</div>

var vm = new Vue({
    el:"#app",
    data:{
    //在data中定义属性，如果属性值
        colors:{color:"red"},
        width:{"letter-spacing":"30px"}
    }
})