vue中的内置指令(1)

因为经常会突发性忘记是什么意思，怎么用，所以给整理出来

---

v-text

更新元素的文本内容

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

v-html

更新元素的 ​​innerHTML​​

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。

如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

<div v-html="html"></div>

v-show

基于表达式值的真假性，来改变元素的可见性

v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。

当条件改变时，也会触发过渡效果。

v-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段

当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

可用于<template> 表示仅包含文本或多个元素的条件块。当条件改变时会触发过渡效果。

当同时使用时，v-if 比 v-for 优先级更高。

v-else

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”

限定：上一个兄弟元素必须有v-if或 v-else-if.

可用于<template>表示仅包含文本或多个元素的条件块

<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

v-else-if

表示 v-if 的“else if 块”。可以进行链式调用

限定：上一个兄弟元素必须有v-if或 v-else-if.

可用于<template>表示仅包含文本或多个元素的条件块

<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>

v-for

基于原始数据多次渲染元素或模板块

• ​指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名：

<div v-for="item in items">
{{ item.text }}
</div>

• 或者，你也可以为索引指定别名 (如果用在对象，则是键值)：

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

• v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>

---

先整理到这，空了继续