学习笔记(09):Vue2.x从入门到实战-v-bind 指令

立即学习:https://edu.csdn.net/course/play/6823/135319?utm_source=blogtoedu

七、v-bind指令

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

例如绑定<img>标签的src属性

HTML代码：

<p><img v-bind:src="imgSrc" width="200" height="100"></p>

js代码：

var app=new Vue({
        el:'#app',
        data:{
            imgSrc:'../img/vue.jpg'
            }
        }
    })

v-bind缩写

<a v-bind:href="url"></a>
<a :href="url"></a>

v-bind绑定Css属性

用v-bind绑定Css属性是经常用到的，绑定Css样式时，绑定的值必须在vue构造器中的data声明。

1、直接绑定css样式

html代码：

<p :class="className">1、绑定Css样式</p>

css:

.ClassA{
        color:blue;
    }

js代码

 var app=new Vue({
        el:'#app',
        data:{
            className:'ClassA'
        }
    })

2、绑定css样式进行判断，若为True显示样式，false则不显示

html代码：

<p :class={ClassA:isOk} v-model="isOk">2、绑定class中的判断</p>

用到v-model数据源绑定，isOk也需要在vue构造器中声明

js代码：

 var app=new Vue({
        el:'#app',
        data:{
            isOk:true
        }
    })

3、绑定class中的数组

html代码：

<p :class=[ClassColor,ClassSize]>3、绑定class中的数组</p>

js代码：

    var app=new Vue({
        el:'#app',
        data:{
            ClassColor:'ClassA',
            ClassSize:'ClassB'
        }
    })

其中ClassA,ClassB是css样式的两个类

4、绑定class中的三元表达式

html代码：

<p :class="isOk?ClassColor:ClassSize" v-model="isOk">4、绑定class中的三元表达式</p>

js代码：

    var app=new Vue({
        el:'#app',
        data:{
            isOk:true,
            ClassColor:'ClassA',
            ClassSize:'ClassB'
        }
    })

若isOk为true则用ClassColor,false为ClassSize。

5、绑定style样式

<p :style="{color:hue,fontSize:font}">5、绑定style</p>

var app=new Vue({
        el:'#app',
        data:{
            hue:'red',
            font:'30px'
        }
    })

6、用对象绑定style样式

<p :style="styleObject">6、用对象绑定Style样式</p>

var app=new Vue({
        el:'#app',
        data:{
            styleObject:{
                color:'green',
                fontSize:'35px'
            }
        }
    })

新手一枚，若有不足，请指教！