vue教程1-06 属性、class和style

一、属性

属性:    v-bind:src=""        width/height/title....        简写:    :src=""    推荐        效果能出来，但是会报一个404错误        效果可以出来，不会发404请求

window.οnlοad=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]"

    
                         
     
        
              
      文字...    
     

 

:class="{

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

        
     
        
      文字...    
     

 

    
                         
     
        
      文字...    
     

data:{

json:{red:a, blue:false}

}

:class="json"

//官方推荐用法

    
                         
     
        
      文字...    
     

 

--------------------------

style:

:style="[c]"

.red{            color: red;        }
     
        
      文字...    
     

 

:style="[c,d]"

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

    
                         
     
        
      文字...    
     

 

:style="json"

    
                         
     
        
      文字...