Vue.js中v-bind指令的用法介紹
更新時(shí)間：2022年03月13日 16:29:06 作者：.NET開(kāi)發(fā)菜鳥(niǎo)
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、什么是v-bind指令
v-bind指令用于響應(yīng)更新HTML特性，允許將一個(gè)或多個(gè)屬性動(dòng)態(tài)綁定到表達(dá)式。v-bind是應(yīng)用在動(dòng)態(tài)屬性上面的。
二、語(yǔ)法
v-bind語(yǔ)法如下：
v-bind:動(dòng)態(tài)屬性名稱="變量"
也可以簡(jiǎn)寫成下面的形式：
:動(dòng)態(tài)屬性名稱="變量"
代碼示例如下：
<img :src="imgUrl" :title="title" />
這里的src和title都是<img>標(biāo)簽的屬性，這里都是綁定到變量。
v-bind中還可以使用判斷，例如：
<img :src="flag?imgUrl:imgUrl2" />
這里表示如果flag變量的值為true，那么src屬性的值是變量imgUrl的值，否則src的屬性值就是變量imgUrl2對(duì)應(yīng)的值。
注意：只要是HTML標(biāo)簽的屬性都可以這樣去綁定屬性值。
三、在class屬性中使用v-bind指令
代碼示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在class屬性中使用v-bind指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 構(gòu)建vue實(shí)例
new Vue({
el:"#my",// el即element，表示掛載的元素，不能掛載在HTML和body元素上面
// data表示數(shù)據(jù),data中可以是各種數(shù)據(jù)格式
data:{
flag:true,
varStyle:"bindStyle", //值是樣式的名稱
style1:"colorStyle",
style2:"colorStyle2"
},
// 方法
methods:{
}
})
}
</script>
<style>
.colorStyle {
color: #ff6600;
}
.colorStyle2{
margin-top: 10px;
background-color: chartreuse;
border: 1px solid blue;
}
.bindStyle {
margin-top: 5px;
color: red;
}
.bindStyle2 {
margin-top: 5px;
color: red;
background-color: green;
}
</style>
</head>
<body>
<div id="my">
<!--單個(gè)樣式引用,這里是直接寫的data里面變量的名稱-->
<div :class="varStyle">這里是使用v-bind改變樣式</div>
<!--單個(gè)樣式引用，雙引號(hào)加單引號(hào)，單引號(hào)里面是樣式的名稱，這種方式可以不在data里面寫變量-->
<div :class="'bindStyle2'">直接引用樣式的名稱，不需要在data里面定義變量</div>
<!--多個(gè)樣式引用 使用數(shù)組的方式-->
<div :class="[style1,style2]">這里是同時(shí)使用多個(gè)樣式</div>
<!--條件判斷 格式：樣式名：判斷條件 注意：樣式名不能用變量-->
<div :class="{'colorStyle2':flag}">條件判斷</div>
<!--三目運(yùn)算符 flag為真顯示style2變量對(duì)應(yīng)的樣式，否則顯示style1變量對(duì)應(yīng)的樣式-->
<div :class="flag?style2:style1">三目運(yùn)算符</div>
</div>
</body>
</html>效果圖如下：
四、在style屬性中使用v-bind指令
代碼示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>style示例</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 構(gòu)建vue實(shí)例
new Vue({
el:"#my",// el即element，表示掛載的元素，不能掛載在HTML和body元素上面
// data表示數(shù)據(jù),data中可以是各種數(shù)據(jù)格式
data:{
flag:true,//布爾型
style1:{background:'blue'},
style2:{color:'red'},
unify:"unifyStyle"
},
// 方法
methods:{
}
})
}
</script>
<style>
.unifyStyle{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="my">
<!--直接寫內(nèi)聯(lián)樣式：要采用駝峰寫法，中間的-去掉-->
<div :style="{color:'#f60',fontSize:'20px',marginTop:'10px'}">
內(nèi)聯(lián)樣式
</div>
<!--單個(gè)引用-->
<div :style="style1" :class="unify">
單個(gè)引用
</div>
<!--多個(gè)樣式引用-->
<div :style="[style1,style2]" :class="unify">多個(gè)樣式引用</div>
<!--三目運(yùn)算符-->
<div :style="flag?style1:style2" :class="unify">使用三目運(yùn)算符進(jìn)行判斷</div>
</div>
</body>
</html>效果圖如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue之常用的內(nèi)置指令，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
本文主要介紹了在vue中寫jsx的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue form表單使用resetFields函數(shù)出現(xiàn)的問(wèn)題
這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問(wèn)題解決
這篇文章主要為大家詳細(xì)介紹一下Vue使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問(wèn)題的解決,需要的可以參考下2024-01-01
vue2.0 中使用transition實(shí)現(xiàn)動(dòng)畫效果使用心得
這篇文章主要介紹了vue2.0 中使用transition實(shí)現(xiàn)動(dòng)畫效果使用心得，本文通過(guò)案例知識(shí)給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-08-08
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說(shuō)可以用 vue-draggable-plus 這個(gè)庫(kù)來(lái)實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
本文主要介紹了淺談Vue組件及組件的注冊(cè)方法，詳細(xì)的介紹了什么是組件，及其組件注冊(cè)的兩種方式(全局和局部)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
改變vue請(qǐng)求過(guò)來(lái)的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)
下面小編就為大家分享一篇改變vue請(qǐng)求過(guò)來(lái)的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue隨機(jī)驗(yàn)證碼組件的封裝實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何封裝一個(gè)隨機(jī)驗(yàn)證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02