持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第五天，
1 v-model基本使用
v-model的基本使用
表单提交 是开发中非常常见的功能,也是和用户交互的重要手段:
如 用户在登录 注册时 需要提交账号 密码
如 用户在检索 创建 更新信息时 需要提交一些数据;
这些都要求我们可以在 代码逻辑中获取到用户提交的数据 我们通常会使用v-model指令来完成
v-model指令 可以在表单 input textarea以及select元素上创建 双向数据绑定
它会根据 控件类型 自动选取正确的方式来更新元素
尽管有些神奇, 但v-model本质上不过是语法糖, 它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊的处理
2 v-model绑定原理
v-model的原理
官方: v-model的原理 其实是背后有两个操作:
v-bind绑定value属性的值
v-on绑定input事件 监听到函数中 函数会获取最新的值赋值到绑定的属性中
<input v-model="searchText">
<!--等价于 -->
<input :value="searchText" @input="searchText = $event.target.value">
事实上v-model更加复杂
v-model绑定textarea
我们再来绑定一下其他的表单类型:textarea checkbox radio select
绑定textarea:
<div id="app">
<textarea cols="30" rows="10" v-model="content"></textarea>
<p>输入的内容:{{content}}</p>
</div>
3 v-model绑定radio
v-model绑定radio 用于选择其中一项:
<div id="app">
<div class="sex">
<label for="man">
<input id="man" type="radio" v-model="gender" value="man">男
</label>
<label for="women">
<input id="women" type="radio" v-model="gender" value="women">女
</label>
<h2>性别:{{gender}}</h2>
</div>
</div>
4 v-model绑定checkbox
我们来看一下v-model绑定****checkbox :单个勾选和多个勾选框
单个勾选框:
v-model即为 布尔值 此时input的value属性并不影响v-model的值
多个复选框:
当是多个复选框时 因为可选中多个 所以对应的data中属性是一个数组.
当选中某一个时 就会将input的value添加到数组中
单选框:
<!-- 1 checkbox 单选框 绑定到属性中的值是一个 布尔类型的值--> <label for="agree">
<input id="agree" type="checkbox" v-model="isAgree"> 同意协议
</label>
<h2>单选框:{{isAgree}}</h2>
多选框:
<!-- 2 checkbox 多选框: 绑定到属性中的值是数组 Array --> <!-- 注意 多选框当中 必须明确的绑定一个value值 --> <!-- 它会自动将value值添加到 v-model属性内--> <div class="hobbies">
<h2>请选择你的爱好:</h2>
<label for="sing">
<input id="sing" type="checkbox" value="sing" v-model="hobbies">唱
</label>
<label for="dance">
<input id="dance" type="checkbox" value="dance" v-model="hobbies">跳
</label>
<label for="rap">
<input id="rap" type="checkbox" value="rap" v-model="hobbies">rap
</label>
<h2>复选框:{{hobbies}}</h2>
</div>
5 v-model绑定select
和checkbox一样 select也分单选和多选两种情况.
单选:只能选中一个值
v-model绑定的是一个值 当我们选中option中的一个时 会将它对应的value赋值给fruit中
多选:可以选中多个值
v-model绑定的是一个数组 当选中多个值时 就会将选中的option对应的value添加到数组fruits中
v-model的值绑定
目前我们在前面的案例中 大部分的值 都是 template中固定好的
如 gender的两个输入框值man women
如 hobby的三个输入框值 basketball football tennis
在真实开发中 我们的数据可能是来自服务器的, 那么我们就可以先将值 请求下来,绑定到data返回的对象中,再通过v-bind来进行值的绑定,这个过程就是值绑定
6 v-model的修饰符
v-model的修饰符-lazy
lazy修饰有什么作用?
默认情况下,v-model在进行双向绑定时 绑定的是input事件,那么会在每次内容输入后就将最新的值和绑定的属性进行同步;
如果我们在v-model后跟上lazy修饰符,那么会将绑定的事件切换为 change事件 只有在提交时 (比如回车) 才会触发
v-model修饰符-number
<div id="app">
<!-- 1 lazy :绑定change事件 --> <input type="text" v-model="message">
<input type="text" v-model.lazy="newMsg">
<h2>message:{{message}}</h2>
<h2>newmessage:{{newMsg}}</h2>
<hr>
<!-- 2 number:自动将内容转换成数字 --> <!-- 这样就是字符串类型 在后面添加 但是加了 number修饰符后 --> <input type="text" v-model="counter">
<input type="text" v-model.number="newcounter">
<h2>counter:{{counter}} - {{typeof counter}}</h2>
<h2>newcounter:{{newcounter}} - {{typeof newcounter}}</h2>
</div>
在我们进行逻辑判断时 如果有一个string类型 可以转化的情况下,会进行隐式转换的
下面的score在进行判断的过程中 进行了隐式转化
const score = "100" // 字符串
if(score>900{
console.log('优秀')
)
console.log(typeof score) //数字类型
v-model修饰符 - trim
<!-- 3 trim : 去除 首尾的空格 --> <!-- <input type="text" v-model="content"> --> <input type="text" v-model.trim="content">
<h2>content:{{content}}</h2>
