vue中v-bind有什么用

<!-- 完整语法 -->
v-bind:property="value"
//此时 value会被解析成一个变量，若是在vue实例中没有找到，会显示找不到错误


<!-- 缩写 -->
:href="value"

<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
    <li>学习Vue</li>
    <li>学习node</li>
    <li>学习React</li>
</ul>

.box{
    border:1px dashed #f0f;
}
.textColor{
    color:#f00;
    background-color:#eef;
}
.textSize{
    font-size:30px;
    font-weight:bold;
}

var vm= new Vue({
    el:‘.box‘,
    data:{
        isColor:true,
        isSize:true
    }
})

<ul class="box" :class="classObject">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

var vm= new Vue({
    el:‘.box‘,
    data:{
        classObject:{
            ‘textColor‘:true,
            ‘textSize‘:false //不渲染，注意看下面的截图
        }
    }
})

<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

var vm= new Vue({
    el:‘.box‘,
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})

<ul class="box" :class="[isA?classA:‘‘, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

var vm= new Vue({
    el:‘.box‘,
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘,
        isA:false 
    }
})

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

<div id="box" :style="{color:activeColor, font-size:size}">红嘴绿鹦哥</div>

var vm= new Vue({
    el:‘#box‘,
    data:{
        activeColor:‘#f00‘,
        size:‘30px‘,
        shadow:‘5px 2px 6px #000‘
    }
})

<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">红嘴绿鹦哥</div>

<div id="box" :style="styleObject">红嘴绿鹦哥</div>

var vm= new Vue({
    el:‘#box‘,
    data:{
        styleObject:{
            color:‘red‘,
            fontSize:‘30px‘
        }
    }
})

<div class="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>

var vm2= new Vue({
    el:‘.box‘,
    data:{
        styleObjectA:{
            fontSize:‘36px‘,
            color:‘blue‘
        },
        styleObjectB:{
            textDecoration:‘underline‘
        }
    }
})

<img class="box" src="{{url}}" >

var vm= new Vue({
    el:‘.box‘,
    data:{
        url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/loGo/bd_logo1_31bdc765.png‘
    }
})

<img class="box" :src="url" >