本文實例講述了vue基礎之v-bind屬性、class和style用法。分享給大家供大家參考，具體如下：
一、屬性
屬性:
v-bind:src=""
width/height/title....
簡寫:
:src="" 推薦
<img src="{{url}}" alt=""> 效果能出來，但是會報一個404錯誤<img v-bind:src="url" alt=""> 效果可以出來，不會發404請求
window.onload=function(){ new Vue({ el:'#box', data:{ url:'https://www.baidu.com/img/bd_logo1.png', w:'200px', t:'這是一張美麗的圖片' }, methods:{ } }); };<div id="box"> <!--<img src="{{url}}" alt="">--> <img :src="url" alt="" :width="w" :title="t"> </div>二、class和style
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是數據
:class="[red,b,c,d]"
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ claOne:'red',//這里的red是樣式class類名 claTwo:'blue' }, methods:{ } }); }; </script></head><body> <div id="box"> <!--這里的calOne,calTwo指data里的數據--> <strong :class="[claOne,claTwo]">文字...</strong> </div></body></html>:class="{red:true, blue:false}"http://這里是{ json}
<style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ } }); }; </script><div id="box"> <strong :class="{red:true,blue:true}">文字...</strong> </div><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ a:true, b:false }, methods:{ } }); }; </script></head><body> <div id="box"> <strong :class="{red:a,blue:b}">文字...</strong> </div></body></html>data:{json:{red:a, blue:false}}:class="json"
官方推薦用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ json:{ red:true, blue:true } }, methods:{ } }); }; </script></head><body> <div id="box"> <strong :class="json">文字...</strong> </div></body></html>style:
:style="[c]"
.red{ color: red; }<div id="box"> <strong :style="{color:'red'}">文字...</strong> </div>:style="[c,d]"
注意: 復合樣式，采用駝峰命名法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style></style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ c:{color:'red'},//這里的red是 class .red b:{backgroundColor:'blue'}//注意: 復合樣式，采用駝峰命名法 }, methods:{ } }); }; </script></head><body> <div id="box"> <strong :style="[c,b]">文字...</strong> </div></body></html>:style="json"
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style></style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ a:{ color:'red', backgroundColor:'gray' } }, methods:{ } }); }; </script></head><body> <div id="box"> <strong :style="a">文字...</strong> </div></body></html>希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答
