Vue笔记:指令(3)

v-model

  • v-model主要用来绑定表单,通过v-model实现双向绑定
  • v-model实现表单元素和数据的双向绑定
  • 双向绑定可以简单理解为,你可以更改我,我也可以更改你
  • input里有一个内部事件叫做input用于动态监听有没有输入东西
  • v-model的原理:相当于 v-bind:value=’’ 和 v-on:input 两个指令的结合在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

v-model绑定radio

如果绑定了v-model,name属性可以不写,因为已经是互斥的了
在这里插入图片描述
在这里插入图片描述

可以直接赋给sex一个初始值(男or女),来实现默认值
用户点击那个,就把对应的value值赋给sex

v-model绑定checkbox

在这里插入图片描述

添加进数组的是,和 input 绑定的 value 值
在这里插入图片描述
在这里插入图片描述

v-model绑定select

选择多个select multiple属性添加之后可以按住ctrl键选择多个
在这里插入图片描述

在这里插入图片描述

v-model值绑定

值绑定就是,值不要写死,而是通过动态的去获取的
在这里插入图片描述
在这里插入图片描述

v-model修饰符

没加lazy是实时更新的,加了lazy之后就是在用户输入完(失焦,敲回车)之后更新,提高了性能
在这里插入图片描述

用户输入的默认都是字符串类型,加了.number之后就更改为number类型了
在这里插入图片描述

trim修饰符 去除字符两边的空格
在这里插入图片描述

响应式的数组方法

  • .push方法(可以做到响应式)

  • 如果需要替换元素的时候,使用replice方法替换元素去更改

  • Vue.set(要修改的对象,索引值,修改后的值)

  • 这种方式也可以更改元素,这是vue内部实现的方式

  • pop() // 删除数组最后一个元素

  • shift() // 删除第一个元素

  • unshift() // 数组最前面添加元素

  • splice() //删除,插入 替换

  • sort() // 传入函数排序

  • reverse() // 数组反转

猜你喜欢

转载自blog.csdn.net/m0_47883103/article/details/108287071