vue基础之v-bind属性、class和style用法分析

本文实例讲述了vue基础之v-bind属性、class和style用法。分享给大家供大家参考，具体如下：

一、属性

属性:

v-bind:src=""
width/height/title....

简写:

:src=""    推荐

    效果能出来，但是会报一个404错误
    效果可以出来，不会发404请求

window.onload=function(){
      new Vue({
 el:'#box',
 data:{
   url:'https://www.baidu.com/img/bd_logo1.png',
   w:'200px',
   t:'这是一张美丽的图片'
 },
 methods:{
 }
      });
    };

二、class和style

:class=""     v-bind:class=""
:style=""     v-bind:style=""
:class="[red]"     red是数据
:class="[red,b,c,d]"

  
  
  
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  
  
  


  
    
    文字...
  

:class="{red:true, blue:false}"//这里是{ json}

    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  
  
  

    文字...
  

  
  
  
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  
  
  


  
    文字...
  

data:{
json:{red:a, blue:false}
}

:class="json"

官方推荐用法

  
  
  
    .red{
      color: red;
    }
    .blue{
      background: blue;
    }
  
  
  


  
    文字...
  

style:
:style="[c]"

.red{
      color: red;
    }

    文字...
  

:style="[c,d]"

注意: 复合样式，采用驼峰命名法

  
  
  
  
  


  
    文字...
  

:style="json"

  
  
  
  
  


  
    文字...
  

希望本文所述对大家vue.js程序设计有所帮助。