vue-指令

vue-指令

一、指令

1.v-if — 条件渲染

• 根据条件控制元素渲染，指令后面跟的是表达式或者 data 数据

2.v-show — 条件渲染

• 通过 display：none 控制元素显示隐藏，元素本身还在

考点： v-if 和 v-show 的区别

• v-if 控制元素渲染，操作 dom 节点，元素是不存在的。
• v-show 通过 display 的值来控制，元素本身还在。
• v-if v-else-if v-else

3.v-for 视图迭代器

• 可以循环 数组，对象，字符串，数组。

  • v-for=" (每一项内容，下标) on/for 要循环的数据源 "
    • 数据源：数组、字符串、数字
  • v-for=" (对象的value，对象的key，对象下标) in/for "

• 使用 v-for 需要绑定 key 值作为唯一标识，一般使用 id 值.

4.v-bind — 属性绑定

• 通过属性绑定可以实现 data 中的数据控制标签属性

  • v-bind:属性名="变量/表达式"
  • 简写为：：属性名="变量/表达式"

• 类名的绑定可以使用对象，对象的 key 表示要添加的类名，对象的 value 表示改类名是否要添加

  <div :class="{key:true,key2: true}"></div>
  <div :class="{key:false, key2: true}"></div>
  

• 类名的绑定可以使用数组，数据里的每一个元素都是 data 里的数据需要在 data 里声明

  <div :class="[class1, class2]"></div>
  data: {
    class1:'red',
    class2: 'blue'
  },
  

5.v-on — 事件绑定

• 绑定事件处理函数
  • v-on:事件名="事件处理函数"
  • 简写 @:事件名="事件处理函数"
• 处理函数的默认参数是事件对象
• 如果处理函数传入其他参数，默认事件对象不提供，需要手动通过$event 传递

6.v-model — 数据双向绑定

• 只能实现表单元素的使用，只有表单元素提供了用户修改界面
• v-model 是和 form 表单元素的 value 关联到一起的