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

发布时间：2020-12-16 23:12:57 所属栏目：百科来源：网络整理

导读：vue教程1-06 属性、class和style 一、属性 ="" /height/ 简写:span style="color: #ff0000;"gt;:src/span/spanspan style="color: #ff0000;"gt;=/span""span style="color: #000000;"gt; 推荐/spanimg src="{{url}}" alt=""gt;span style="color: #000000;"g

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]"
注意: 复合样式，采用驼峰命名法

?

">文字...

?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!