v-bind基本用法

一、v-bind:class用法

<style>//样式
.box{background-color: #ff0;}
.textColor{color: blue;}
.textSize{font-size: 30px;}
</style>

1.布尔值判断是否采用

<span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>
　data:{
    　　isColor:true,
    　　isSize:true
　　}

2.对象属性-布尔值判断是否采用

 <span class="box" :class="classObject">我是字</span>
data:{
    classObject:{
    'textColor': true,
    'textSize': true
    }

4.isA?classA:''三元表达式

<span class="box" :class="[isA?classA:'', classB]">我是字</span>
    data:{
        classA: 'textColor',
        classB: 'textSize',
        isA: false
    }

3.数组形式

  <span class="box" :class="[classA,classB]">我是字</span>
    data:{
        classA: 'textColor',
        classB: 'textSize'
    }

二、v-bind:style

1

<span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
data:{
            activeColor: 'red',
            size: '30px',
            shadow: '5px 2px 6px #000'
        }

2.

<span class="box" :style="styleObject">我是字</span>

 data:{
        styleObject:{
        color: 'red',
        fontSize: '30px',
        textShadow: '5px 2px 6px #000'
        }

3.

 <span class="box" :style="[styleA,styleB]">我是字</span>

 data:{
        styleA:{
            fontSize: '30px',
            color: 'red'
        },
        styleB:{
            textShadow: '5px 2px 6px #000'
        }
    }

4.

  <span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
data:{
        styleA:{
            fontSize: '30px',
            color: 'red'
        },
        styleB:{
            textShadow: '5px 2px 6px #000'
        },
        isA: false
    }

三、v-bind:src

<a :href="url"></a>
 ![](url)
 data:{
            url: "../img/pg.png"
        }

四、v-bind:title

ps：这个显示方式自己试试

<div id="app">
    <div :title="message">我是字</div>
</div>    
<script type="text/javascript">
    new Vue({
    el: "#app",
    data:{
        message:"我是吱吱"
    }
    })
</script>