除了html标签里面的文本内容，可以由vue data绑定以外，html中属性的值，也可以被绑定啊！

v-bind：属性绑定

@试一试@：仍然使用{{data}}行不行？

我们得用另外一种语法（指令）：

<h1 v-bind:title="who" id="yz-hello">

即在正常的title属性前加一个：v-bind:

冒号后面的 title 被称之为参数，参数名可以自定义

于是，页面呈现时，属性的值 who 就会被Vue实例对象中data.who替换：

data: {
    who: "大飞哥"
}

演示：变更title和who

和{{data}}一样，属性值也可以是JavaScript表达式，比如：

v-bind:title="who+'O(∩_∩)O哈哈~'"

而且他们一样是响应式的（复习）

演示：控制台修改vue data

vm.attr = 'description'

bool值

如果属性值是bool值，

data: {
    disabled: false,

<h1 v-bind:disabled="disabled" id="yz-hello">

vue会自动转换：

• 如果属性值为“假”（根据？JavaScript语法，包括false/null/undefined，但不包括''）：该属性直接不予显示
• 否则，vue会根据HTML规范生成相应的值，比如：disabled="disabled"，而不是disabled=true
  

简写

如果项目完全有vue控制（不会收到其他框架/类库的干扰），也可以使用其简写模式（省略掉了v-bind）：

<h1 :title="who" id="yz-hello">

<h1 :[attr]="who" id="yz-hello">{{greet}}</h1>

动态参数

从 2.6.0 开始，可以用方括号（[]）括起来的 JavaScript 表达式 作为一个指令的参数（注意，是参数，不是参数值）：

<h1 v-bind:[attr]="who" id="yz-hello">{{greet}}</h1>

attr是在vue data中定义的：

data: {
    attr: "title",

继续演示：

• 不要使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。
• 动态参数也可以使用单行JavaScript表达式，但不能在表达式中出现：引号、空格、大于小于、斜杠、等于符号，否则会触发编译警告：
  Invalid dynamic argument expression: attribute names cannot contain spaces, quotes, <, >, / or =

实际开发中，动态参数主要是为了给同一个元素赋予不同的事件（后文详述）

Class 与 Style 绑定

本来这些都是v-bind可以完成的，但Vue.js 做了专门的增强功能。

类

假设现有两个CSS类：

.blue{
    background-color:deepskyblue;
}
.italic{
    font-style:italic;
}

我们可以直接使用刚学的属性绑定知识：

<h1 id="yz-hello" class="italic" v-bind:class="bg">hello，源栈</h1>

PS：vue会自行合并原生Html定义的class和由vue绑定的class。

但如果我们需要让这一个h1使用两个类定义的样式呢？可以使用数组：

<h1 id="yz-hello" v-bind:class="[bg,fs]">hello，源栈</h1>

vue data中定义了bg和fs：

data: {
    bg: "blue",
    fs: "italic"
}

很多时候我们还想动态的控制使用/不使用（切换）某个类，这时候我们可以传入对象：

<h1 id="yz-hello" v-bind:class="{blue:isActive}">

对象中属性对应类名，属性值是bool值，在vue data中定义：

data: {
    isActive:true
}

整个代码的意思就是：根据isActive的值来确定是否使用class blue。

演示：更改isActive的值为null/undefined等，然后发现字符串（''）又代表false了，o(╥﹏╥)o……

传入的对象还可以包含多个属性：

<h1 id="yz-hello" v-bind:class="{blue:isActive, italic:needEmphasis}">

data: {
    isActive: undefined, needEmphasis: true
}

对象和数组还可以混用：

<h1 id="yz-hello" v-bind:class="[bg,{italic:needEmphasis}]">

行内样式

可以用对象中的属性（键值对）表示样式，多个样式就需要对象的多个属性：

<h1 id="yz-hello" v-bind:style="{fontStyle:fs, backgroundColor:bg}">

data: {
    bg: "#b6ff00",
    fs: "italic"
}

注意：JavaScript对象属性名不能包含短横线（-），所以我们需要用小驼峰命名法替代。

兼容性支持：

• 自动添加前缀
• 多重值：数组中渲染最后一个被浏览器支持的值（2.3.0+版本）
  

更优雅的写法

无论是style还是class，凡是值是对象的，都可以将对象设定在vue data中：

<h1 id="yz-hello" v-bind:class="pageTitle">

data: {
    pageTitle: {
        blue: true,
        italic: false
    }
}

@试一试@：style的时候这样行不行，为什么？

data: {
    fs: "#b6ff00",
    pageTitle: {
        backgroundColor: fs 
    }
}

作业

1. 能用vue data（通过在F12控制台修改值）控制：
   
   1. 铃铛的闪烁
   2. 排行榜的图标样式
   3. 用户的等级颜色

源栈学历

在当前系列 Vue.js 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：