vue之v-bind

標籤：disable   isa   其他   als   www   圖片   應用   一個   HERE   

 接觸Vue已經有很長一段時間了，後來因為工作的原因，已經有差不多一年的時間沒有碰過它了，害怕時間久，自己就完全忘記了，所以還是想抽出一點時間將以前的知識整理一下。

剛接觸vue的時候，覺著最神奇的地方莫過於vue的資料繫結了，今天要總結的就是vue中常用的屬性綁定v-bind。

    <div id="demo">        <!--將這個元素節點的 title 屬性和 Vue 執行個體的message 屬性綁定到一起。-->        <div v-bind:title="message">DOM元素屬性綁定</div>        <div :title="msg">DOM元素屬性綁定</div>    </div>    <script>        var demo1 = new Vue({            el:‘#demo‘,            data:{                message:‘aaa‘,                msg:‘bbb‘,            }        })    </script>    

上面展示的是v-bind的最基本的使用，第一種是完整文法，第二種是縮寫方式，除了將元素的title屬性和vue執行個體的相關欄位進行綁定外，還能將其他的屬性欄位進行綁定，最常見的是對於樣式的綁定，即class和style屬性。

對象文法

我們可以給v-bind:class 一個對象，也可以直接綁定資料裡的一個對象，以動態地切換class。當然，v-bind:class指令也可以與普通的class特性共存。

<div id="demo">        <div :class="{active:isActive,‘text-danger‘:hasError}">給class綁定一個對象，動態切換class</div>        <div :class="{active:isActive,‘textDanger‘:!isActive}">給class綁定一個對象，動態切換class</div>        <div :class="classObj">給class綁定一個對象，動態切換class</div>    </div>    <script>        var demo1 = new Vue({            el:‘#demo‘,            data:{                isActive:true,                hasError:true,                classObj:{                   ‘textColor‘:true,                   ‘textSize‘:false                }            }        })    </script>    

數組文法

我們可以把一個數組傳給v-bind:class，以應用一個class列表。

    <div id="demo">        <div :class="[activeClass,errorClass]">可以把一個數組傳給 v-bind:class ，以應用一個 class 列表</div>    </div>    <script>        var demo1 = new Vue({            el:‘#demo‘,            data:{               activeClass:‘active‘,               errorClass:‘text-danger‘,            }        })    </script>    

三目運算

 可以運用三目運算，根據條件列表中的class。

<div id="demo">        <div class="box" :class="[isA?classA:‘‘, classB]">三目運算</div>    </div>    <script>        var demo1 = new Vue({            el:‘#demo‘,            data:{                classA:‘textColor‘,                classB:‘textSize‘,                isA:false             }        })    </script>    

內聯樣式

<div id="demo" v-bind:style="styleObject">        <p :style="{color:rcolor,fontSize:fsize + ‘px‘ }">採用駝峰式命名</p>        <p :style="[styleObject,A]">數組綁定</p>    </div>    <script>        var demo = new Vue({              el: ‘#demo‘,              data: {                  styleObject: {                       color: ‘red‘,                    fontSize: ‘24px‘                },                A:{                    display:‘block‘,                },          　　rcolor:‘red‘,         　　 fsize:24,              },        })    </script>    

其他運用

<div id="demo">        <div :disabled="isDisabled">對布爾值的屬性也有效——如果條件被求值為false，該屬性會被移除</div>        <div :disabled="Disabled">對布爾值的屬性也有效——如果條件被求值為false，該屬性會被移除</div>        <img :src="url" >    </div>    <script>        var demo1 = new Vue({            el:‘#demo‘,            data:{                ‘isDisabled‘:true,                ‘Disabled‘:false,                url:"https://www.baidu.com/img/bd_logo1.png?where=super"            }        })    </script>    

vue之v-bind