Vue

97 阅读1分钟

简单指令

v-bind:属性想使用动态变量就需要添加 简写为符号 冒号: v-on:事件绑定例如:click点击事件 简写@click

双向绑定指令v-model:

  • v-model 是一种语法糖 来实现双向绑定数据
  • v-model 可以在不操作Dom的条件下快速获取表单数据
  • 双向绑定data中的值,可以在input、textarea、select等使用,div等不可以
  • .lazy 在表单事件中 不会时时更新,只会在失去焦点的时候更新

条件渲染指令

  • v-if
  • v-show
  • if的条件为false的时候会把整个元素在Dom中删除
  • v-show 只是让元素做一层display:none 隐藏元素
  • v-if配套指令
  • v-else-if    v-else
  • 与原生同理

列表渲染指令v-for

类似与for in 只要用了v-for这个指令 在后面一定要绑定一个:key,而且尽量把id作为v-for 循环 里面有两项 item表示数组的每一项 index表示数组的索引 循环的时候需要加key 最好使用对象里面的属性为key值 没有再使用index