v-bind主要用于动态的绑定属性。比如绑定title:

v-bind:title="myTitle"

可以简写为：

:title="myTitle"

绑定多个属性：

:title="myTitle"  :id="myId"

绑定class

<ul class="box"  v-bind:class="{'textColor': isColor,  'textSize': isSize}">
       <li>1111</li>
       <li>222</li>
</ul>
new Vue({
    el: "#app",
    data: {
         isColor: true,  //这里定义一个布尔值，为真绑定对应的class，为假不绑定
         isSize: true,
    }
})

当isColor为真的时候给ul绑定textColor样式，当isSize为真的时候给ul绑定textSize样式。

HTML最终渲染为<ul class="box textColor textSize">...</ul>

也可以直接绑定数据里的一个对象:

<ul class="box" :class="classObject">
    <li>111</li>
    <li>222</li>
</ul>

new Vue({
    el: "#app",
    data: {
        classObject:{
            textColor: true,  //这里直接写样式名，为真添加，为假不添加
            textSize: true,
        }
    }
})

还可以将一个数组传递给v-bind:class,以应用一个class列表

<ul :class="[class1, class2]">
    <li>111</li>
    <li>222</li>
</ul>

new Vue({
    el: "#app",
    data: {
       class1: "cBlue"，
       class2: "fontSize36"
    }
})

html最终渲染为 <ul class="cBlue fontSize36"> ... </ul>

如果想根据条件切换列表中的class，可以用三目运算:

<ul  :class="[isA?class1:' ', class2]">
     <li>1111</li>
     <li>222</li>
</ul>

new Vue({
    el: "#app",
    data: {
       class1: "cBlue",
       class2: "fontSize36",
       isA: true,
    }
})

绑定内联样式

一、对象语法

v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法（官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的:

<h3 v-bind:style="{font-size: fontSize, color:fontColor}">v-bind:style行内样式</h3>    报错

正确的写法：

<h3 v-bind:style="{fontSize: fontSize, color:fontColor}">v-bind:style行内样式</h3>

new Vue({
    el: "#app"，
    data: {
         fontSize: "56px",
        fontColor: "yellow",
     }
})

也可以直接绑定到一个样式对象，这样更好，让模板更清晰：

<ul v-bind:style="styleObject">
    <li>111</li>
    <li>222</li>
</ul>

new Vue({
    el: "#app",
    data: {
        styleObject：{
              color: "pink",
              fontSize: "108px",
        }
    }
})

html最终渲染为 <ul style="color:pink, font-size:108px"> ... </ul>

二、数组语法

可将多个样式对象应用到一个元素上

<ul v-bind:style="[styleArrayA, styleArrayB]">
    <li>111</li>
    <li>222</li>
</ul>
new Vue({
    el: "#app",
    data: {
        styleArrayA: {
            color: "#8B00FF",
            fontSize: "36px",
        },
      styleArrayB: {
          textDecoration:"underline",
        }
    }
})

绑定图片src地址

<img :src="url"/>
new Vue({
    el: "#app",
    data: {
        url: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"
    }
})

推荐使用v-bind:src="url"这种方式绑定。