Vue指令

92 阅读1分钟

v-html = "表达式 " → 动态设置元素 innerHTML

v-show = "表达式" 表达式值 true 显示, false 隐藏(控制元素显示隐藏) 

v-if = "表达式" 表达式值 true 显示, false 隐藏(控制元素显示隐藏(条件渲染)) 

v-else-if = "表达式" (辅助 v-if 进行判断渲) 

v-on:事件名 = "内联语句" 

v-on:事件名 = "methods中的函数名" 

v-bind:属性名="表达式” (动态的设置html的标签属性) 

v-for = "(item, index)“ (基于数据循环, 多次渲染整个元素) 

v-for 中的 key key属性 = "唯一标识 

v-model = '变量' (给 表单元素 使用, 双向数据绑定)   

指令修饰符

① 按键修饰符 

  • @keyup.enter → 键盘回车监听

② v-model修饰符 

  • v-model.trim → 去除首尾空格 
  • v-model.number → 转数字 

③ 事件修饰符 

  • @事件名.stop → 阻止冒泡 
  • @事件名.prevent → 阻止默认行为