Vue知識點總結(3)——v-bind(超級詳細)
阿新 • • 發佈:2020-12-10
v-bind指令的作用就是繫結資料和元素屬性,應用也比較頻繁。
它可以繫結在大部分元件的屬性上。
<div id="app">
<a v-bind:href='res.url'>{{res.name}}</a>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
res:{
name:'百度',
url:'https://www.baidu.com'
},
}
});
</script>
這是v-bind最基本的用法,這種情況下必須這樣使用,不然a元件會把href屬性中的res.url解析為字串,而不是變數。
加v-bind後解析出來的DOM結構。
不加v-bind解析出來的DOM結構。
因為v-bind使用很頻繁,它還有一種簡寫方式,就是
<a :href='res.url'>{{res.name}}</a>
效果一樣。
v-bind不止可以繫結變數,也可以繫結物件。
<style>
.active {
color:#f00;
}
</style>
<div id="app">
<h3 v-bind:class="{active:isActive}">v-bind的用法</h3>
<h4 :style='{color:Color,fontSize:fontSize + "px"}'>aaaabbbb</h4>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
Color:'green',
fontSize:'50'
}
});
</script>
在h3標籤中,我們給它綁定了一個動態的class屬性active。當isActive的值為true的時候,這個class屬性才會被掛載到標籤上。
在h4標籤中,我們同樣給元件的style屬性綁定了動態的屬性值,Color和fontSize的大小都可以隨便更改,只有把v-bind繫結在style屬性上,它才會被解析為動態變數值,否則一樣會被解析為一堆字串。
v-bind的用法大概就是這些。用法比較簡單,但是實用性很強。你會在很多的業務場景下使用它,前提是你要足夠了解它。
有微信小程式課設、畢設需求聯絡個人QQ:505417246
關注下面微信公眾號,可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料