vue指令

Author Avatar
丁起男 08月 18,2020
  • 在其它设备中阅读本文章

VUE指令

v-text

  • 作用:设置标签的内容
  • 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容

v-html

  • 作用设置元素的innerHTML
  • 内容中的html结构会被解析为标签,v-text指令无论内容是什么,只会解析为文本

v-on

  • 作用:为元素绑定事件
  • 事件名不需要写on
  • 指令可以用@简写
  • 绑定的方法定义在methods属性中
  • 定义方法时可以通过定义形参来接收实参
  • 事件后跟上 .修饰符可以对时机进行限制

v-show

  • 作用:根据表达式的真假切换元素的显示状态
  • 本质是切换元素的display (style=“display:none;”)

v-if

  • 作用:根据表达式的真假切换元素的显示状态
  • 本质是通过操作dom元素来切换显示的状态

如果切换比较频繁,建议使用v-show

v-bind

  • 作用:为元素绑定属性
  • 完整写法:v-bind:属性名
  • 简写:忽略v-bind直接 :属性名

动态增删class:

写法一:v-bind:class="表达式>'class名':''"

写法二::class="class名:表达式"

v-for

  • 作用:根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法:item in 数据 或 (item,index) in 数据
    • item:每一项
    • index:下标
    • in:关键字,不可变
    • 数据:一般是数组类型
  • 数组长度的变更会同步到页面上,是响应式的

v-mode

  • 作用:便捷的设置或获取表单元素的值
  • 绑定数据和表单元素的值(双向绑定)