一叽赊、v-bind是處理HTML中的標簽屬性的

綁定<img>上的src進行動態(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”的動態(tài)綁定了src的值龙致，這個值是在vue構造器里的data屬性中找到的。

v-bind縮寫

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

二刘莹、綁定CSS樣式

在工作中我們經(jīng)常使用v-bind來綁定css樣式：
在綁定CSS樣式時阎毅，綁定的值必須在vue中的data屬性中進行聲明
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并進行判斷净薛，在isOK為true時顯示樣式，在isOk為false時不顯示樣式蒲拉。

  <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中使用三元表達式判斷

 <p v-bind:class="isOk?classA:classB">4.三元運算符</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燃领、用對象綁定style樣式

<div v-bind:style="style">6.綁定style對象</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

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