一、v-bind是處理HTML中的標(biāo)簽屬性的

綁定<img>上的src進(jìn)行動(dòng)態(tài)賦值。

<div id="app">
        <img  v-bind:src="url">
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld",
            url:'https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=1902559523,1458681463&fm=202&mola=new&crop=v1',
   
        }
    })
</script>

在html中我們用v-bind:src=”url”的動(dòng)態(tài)綁定了src的值，這個(gè)值是在vue構(gòu)造器里的data屬性中找到的。

v-bind縮寫(xiě)

 <p>
        <img :src="url">
        <a :href="baidu" target="_blank">百度</a>
        <p :class="className">1.綁定class</p>
    </p>

二、綁定CSS樣式

在工作中我們經(jīng)常使用v-bind來(lái)綁定css樣式：
在綁定CSS樣式時(shí)，綁定的值必須在vue中的data屬性中進(jìn)行聲明
1、直接綁定class樣式

 <p v-bind:class="className">1.綁定class</p>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            className:['red','ft16'],
            isOk:true,
            classA:'red',
            classB:'ft16',
            style:{
                width:200+'px',
                background:"red",
                height:400+'px',
                fontSise:18+'px'
            }
        }
    })
</script>

2、綁定classA并進(jìn)行判斷，在isOK為true時(shí)顯示樣式，在isOk為false時(shí)不顯示樣式。

  <p v-bind:class="{red:isOk}">2.綁定class中的判斷</p>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            className:['red','ft16'],
            isOk:true,
            classA:'red',
            classB:'ft16',
            style:{
                width:200+'px',
                background:"red",
                height:400+'px',
                fontSise:18+'px'
            }
        }
    })
</script>

3、綁定class中的數(shù)組

 <p v-bind:class="[classA,classB]">3.綁定class中的數(shù)組</p>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            className:['red','ft16'],
            isOk:true,
            classA:'red',
            classB:'ft16',
            style:{
                width:200+'px',
                background:"red",
                height:400+'px',
                fontSise:18+'px'
            }
        }
    })
</script>

4、綁定class中使用三元表達(dá)式判斷

 <p v-bind:class="isOk?classA:classB">4.三元運(yùn)算符</p>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            className:['red','ft16'],
            isOk:true,
            classA:'red',
            classB:'ft16',
            style:{
                width:200+'px',
                background:"red",
                height:400+'px',
                fontSise:18+'px'
            }
        }
    })
</script>

5、綁定style

  <div v-bind:style="{background:classA,fontSize:classB}">5.綁定style</div>

6、用對(duì)象綁定style樣式

<div v-bind:style="style">6.綁定style對(duì)象</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            className:['red','ft16'],
            isOk:true,
            classA:'red',
            classB:'ft16',
            style:{
                width:200+'px',
                background:"red",
                height:400+'px',
                fontSise:18+'px'
            }
        }
    })
</script>

image.png

希望早點(diǎn)實(shí)戰(zhàn)呀，其實(shí)不是很明白vue和react是怎么處理樣式的