这篇文章主要介绍了vue基础之v-bind属性、class和style用法,结合实例形式分析了vue.js中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-600', w:'200px', t:'这是一张美丽的图片' }, methods:{ } }); };
<div id="box"> </div>
二、class和style
:class=”” v-bind:class=””
:style=”” v-bind:style=””
:class=”[red]” red是数据
:class=”[red,b,c,d]”
<title></title> .red{ color: red; } .blue{ background: blue; } <div id="box"> <!--这里的calOne,calTwo指data里的数据--><strong>文字...</strong></div>
:class=”{red:true, blue:false}”//这里是{ json}
.red{ color: red; } .blue{ background: blue; } <div id="box"> <strong>文字...</strong></div>
<title></title> .red{ color: red; } .blue{ background: blue; } <div id="box"> <strong>文字...</strong></div>
data:{ json:{red:a, blue:false} }
:class=”json”
官方推荐用法
<title></title> .red{ color: red; } .blue{ background: blue; } <div id="box"> <strong>文字...</strong></div>
本文来源gao@daima#com搞(%代@#码网
style:
:style=”[c]”
.red{ color: red; } <div id="box"> <strong>文字...</strong></div>
:style=”[c,d]”
注意: 复合样式，采用驼峰命名法
<title></title> <div id="box"> <strong>文字...</strong></div>
:style=”json”
<title></title> <div id="box"> <strong>文字...</strong></div>
希望本文所述对大家vue.js程序设计有所帮助。
以上就是vue基础之v-bind属性、class和style用法分析的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue基础之v-bind属性、class和style用法分析
转载请注明原文链接：vue基础之v-bind属性、class和style用法分析
