2. Vue指令

指令：v-xxx
用于动态操作某些数据

v-bind:

image.png

v-html:

image.png

v-if: // v-else:条件渲染(不需要频繁切换且安全性较高的界面)

image.png

v-show:条件渲染(需要循环渲染及权限或安全性不需要很高的界面)

image.png

v-for:循环迭代显示

image.png

image.png

对于对象

image.png

image.png

image.png

image.png

对于迭代（循环输出）

image.png

image.png

v-cloak:配合style使用：解决预加载显示问题

image.png

v-model:数据双向绑定
例一：点击单选按钮打印出对应需要输出的内容

  
  男
  女
  人妖
  {{gender}}

 

例二：选择复选框打印出选中所有选项所需输出内容

  
  男
  女
  人妖
  {{hobby}}

 

例三：关于v-model修饰符

  
  
  {{inputValue}}

  
  
  
  age: {{age}}

  
  
  trim: {{test}}