Vue知識點總結(3)——v-bind（超級詳細）

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等實戰學習資料