Vue2.0学习笔记v-bind(7)

一、v-bind是处理HTML中的标签属性的

绑定<img>上的src进行动态赋值。

<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”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。

v-bind缩写

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

二、绑定CSS样式

在工作中我们经常使用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中的数组

 <p v-bind:class="[classA,classB]">3.绑定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>

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

希望早点实战呀，其实不是很明白vue和react是怎么处理样式的