vue基礎(chǔ)之v-bind屬性、class和style用法分析
本文實(shí)例講述了vue基礎(chǔ)之v-bind屬性、class和style用法。分享給大家供大家參考,具體如下:
一、屬性
屬性:
v-bind:src=""
width/height/title....
簡寫:
:src="" 推薦
<img src="{{url}}" alt="">
效果能出來,但是會(huì)報(bào)一個(gè)404錯(cuò)誤
<img v-bind:src="url" alt="">
效果可以出來,不會(huì)發(fā)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是數(shù)據(jù)
: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里的數(shù)據(jù)--> <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]"
注意: 復(fù)合樣式,采用駝峰命名法
<!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'}//注意: 復(fù)合樣式,采用駝峰命名法 }, 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程序設(shè)計(jì)有所幫助。
相關(guān)文章
watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別及實(shí)現(xiàn)案例
watch和computed是vue實(shí)例對象中的兩個(gè)重要屬性,watch是監(jiān)視屬性,用來監(jiān)視vue實(shí)例對象上屬性和方法的變化,computed被稱為計(jì)算屬性,可以將data對象中的屬性進(jìn)行計(jì)算得到新的屬性,這篇文章主要介紹了watch(監(jiān)視屬性)和computed(計(jì)算屬性)的區(qū)別,需要的朋友可以參考下2023-05-05Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化
這篇文章主要介紹了Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue中v-if和v-for一起使用的弊端及解決辦法(同時(shí)使用 v-if 和 v-for不
當(dāng) v-if 和 v-for 同時(shí)存在于一個(gè)元素上的時(shí)候,v-if 會(huì)首先被執(zhí)行,這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下2023-07-07Element InputNumber計(jì)數(shù)器的使用方法
這篇文章主要介紹了Element InputNumber計(jì)數(shù)器的使用方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09聊聊Vue中provide/inject的應(yīng)用詳解
這篇文章主要介紹了聊聊Vue中provide/inject的應(yīng)用詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11