vue的相关指令

1.v-text指令

语法:
<标签名 v-text=“表达式”></标签名>

作用:
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)

注意事项:
如果值是html的值,会作为普通的文本使用。
标签中的属性值必须是data中的一个属性.

2.v-for指令

语法:
<标签 v-for=“元素 in 数据源”></标签>

数据源: 数组,
元素: 数组中的一个元素,

数据源: 对象
元素: 对象中的一个属性名

<标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键

<标签 v-for="(元素,键,索引) in 对象"></标签>

2.1v-for指令生成table表格

3.v-bin指令

将data中的数据绑定到标签上,作为标签的属性.

语法:
为一个标签属性绑定一个值
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式:
<标签 :标签属性名字=“表达式”></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>

4.v-model指令（双向绑定）

语法:
<标签 v-model=“表达式”></标签>

在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
注意事项:
a.如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
b.绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
c.v-model只作用于以下表单:
input select textarea

5.v-show指令

<标签名 v-show=“表达式”></标签名>
作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项:
a.当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
b.标签的值会自动转换为boolean类型的值

6.v-if指令

语法:
<标签名 v-if=“表达式”></标签名>

作用:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

注意事项:
当表达式中的值是false时, 是从页面上删除.
标签的值会自动转换为boolean类型的值

7.v-else指令

12、 v-else指令
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else></标签名>

作用:
当v-if表达式不成立时, v-else执行.

注意事项:
该指令必须也v-if搭配起来使用.
v-else是一个单独的属性, 该属性是不要赋值的.

8.v-else-if指令

语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else></标签名>