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

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

一、属性

=""/height/简写: <span style="color: #ff0000;"&gt;:src</span></span><span style="color: #ff0000;"&gt;=</span>""<span style="color: #000000;"&gt; 推荐 </span><img src="{{url}}" alt=""&gt;<span style="color: #000000;"&gt; 效果能出来，但是会报一个404错误 </span><img v-bind:src="url" alt=""&gt; 效果可以出来，不会发404请求</pre>

window.onload='#box''https://www.baidu.com/img/bd_logo1.png''200px''这是一张美丽的图片'<div id="box">

    <img <span style="color: #ff0000;"&gt;:src</span>="url" alt="" <span style="color: #ff0000;"&gt;:width</span>="w" <span style="color: #ff0000;"&gt;:title</span>="t"&gt;
</div></pre>

 

 

二、class和style

:class=""     v-bind:class=""
:style=""     v-bind:style=""

 

:class="[red]"     red是数据
:class="[red,b,c,d]"

="[]">文字...

 

:class="{}"//这里是{ json}

}">文字...

 

:,:}">文字...

data:{

json:{red:a,blue:false}

:class="json"

//官方推荐用法

">文字...

 

--------------------------
style:
:style="[c]"

 

:style="[c,d]"
注意: 复合样式，采用驼峰命名法

 

">文字...