vue 官网 ---- https://cn.vuejs.org/v2/guide/class-and-style.html
样式绑定
class绑定
1、对象语法
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
我们也可以在这里绑定一个返回对象的计算属性
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
2、数组语法
<div v-bind:class="['activeClass', 'errorClass']"></div>
可以使用三元表达式
<div v-bind:class="[isActive ? ’activeClass‘: '', errorClass]"></div>
style 绑定
1、对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
也可以直接绑定到一个样式对象，对象语法常常结合返回对象的计算属性使用
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
2、数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
data: {
baseStyles: {
color: 'red',
fontSize: '13px'
},
overridingStyles: {
backgroundColor: 'blue'
}
}
条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
在 template 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
用 key 管理可复用的元素
如下代码：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，
<input> 不会被替换掉——仅仅是替换了它的 placeholder。
如果不想要让他们复用，而是完全独立，只需要给这两个 input 元素添加 key 属性便可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
此时，两个 template 元素下的 input 将不再复用。但是，<label> 元素会被复用，因为它们没有添加 key 属性。
v-if 与 v-for 同时渲染
永远不要把
v-if和v-for同时用在同一个元素上
一般我们在两种常见的情况下会倾向于这样做：
1、为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
2、为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol、template)。
<ul v-if="shouldShowUsers">
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
v-show
用法与 v-if 差不多：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
注意，
v-show不支持<template>元素，也不支持v-else。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="(item, index) of items" :key="item.message">
{{ item.message }} --- {{ index }}
</li>
</ul>
也可以用 v-for 来遍历一个对象的属性
<ul id="v-for-object" class="demo">
<li v-for="(value, name, index) in object">
{{ index }}.{{ name }} : {{ value }}
</li>
</ul>
value 是对象的属性值，name 是对象的属性名，index 是当前索引值
在遍历对象时，会按
Object.keys()的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
维护状态 key
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这会导致当我们使用 push、unshift 等会使数据顺序发生变动的操作时，页面的数据会发生错位。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
key 属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
1、如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
2、而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
key 最常见的用法是与 v-for 结合，它也可以用于强制替换元素/组件而不是重复使用它。如下：
- 完整地触发组件的生命周期钩子
- 触发过渡
<transition>
<!-- 当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。 -->
<span :key="text">{{ text }}</span>
</transition>
