vue指令

带有 v- 前缀的特殊属性

v-show 控制切换一个元素的显示和隐藏

• 语法：v-show = " 表达式 "
• 根据表达式的结果真假，确定是否显示当前元素
• 隐藏的本质是 display : none

v-if 控制元素显示或者移除

• 语法：v-if = " 表达式 "
• true : 显示 -------- false : 移除
• 移除的本质是 不渲染元素的代码

v-if与v-show使用场景：

• v-if切换消耗比较高（多次创建、销毁）
• v-show初始消耗比较高 （切换频繁时使用）

v-else

• 与 v-if. v-else-if 配合使用

v-else-if

            
             
优秀
             
良好
             
及格
             
不及格

v-on 为HTML元素绑定事件监听

• 语法：v-on：事件名称 = " 函数名称( ) "
• 简写：@事件名= " 函数名称( ) "
• 函数定义在 Vue 实例的methods配置项中

v-model 必须绑定在表单元素上，将输入同步到视图上

• 语法：v-model= " 变量 "
• 使用在 type:checkbox 上时 ： v-model与布尔值绑定， true 为选择， fslae 为取消选择 。

v-for 遍历数据，并在页面进行数据展示

• 语法：
  • v-for = " (item，index) in arr "
  • v-for="(val，key) in object"
  • v-for="(val，key，index) in object"
• item 表示每次遍历得到的元素
• index 表示item的索引值，可选参数
• 字符串和数字也可以遍历，会被拆分

v-bind 绑定HTML元素的属性

• 语法：v-bind : 属性名 = " 表达式 "

• 绑定属性

  • 一个属性：
  • 多个属性：

• 绑定样式：

  • :class="index==selected?'active':'' "-----表达式
  • 一个样式 ：:class="{classA:条件}"----- json语法
  • 多个样式 ：:class="[classA , classB]"----- 数组语法

• 绑定style：

  • :style="{fontSize:size+'px'}" ----- json语法
  • :style="[styleObjectA , styleObjectB]"----- 数组语法
• image.png
  • 当 item.bol 为 true 时添加 .Red 这个类名
  • 当 item.bol 为 false 时不添加 .Red 这个类名

v-text 更新元素的textContent

• 语法：v-text = " 变量 "
• 相当于innerHTML,会替换掉元素中的所有文本

v-html 插入一些标签内容

• !!!慎用

v-cloak 隐藏直到数据加载完成

• 语法：给视图容器标签加上v-cloak属性
• style中加上display:none