vue中表单输入和表单修饰符

Posted stay_少年与梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中表单输入和表单修饰符相关的知识,希望对你有一定的参考价值。

vue中的表单输入及表单修饰符

基础用法

v-model 指令在表单 <input><textarea><select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但 v-model
本质上不过是语法糖。

数据的双向绑定可以理解为:数据的单向绑定+UI事件监听,单向绑定是将model绑定到view,当model更新时,view也会更新;双向绑定就是model和view互相驱动。

示例

<div id="app">
    <label>
        <input type="text" v-model="info">
    </label>
    <p>{{info}}</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            info:'hello world!',
        }
    })

</script>

作用

它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 javascript 在组件的 data 选项中声明初始值。

用法

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

  • text 和 textarea 元素使用 value property 和 input 事件;
  • checkbox 和 radio 使用checked property 和 change 事件;
  • select 字段将 value 作为 prop 并将 change作为事件。

注意

在 input框不同的type类型 v-model存放的内容也不一样
text 和 radiov-model 存放的是value值

checkbox v-model的true和false可以控制选中和不选中 v-model=‘aa’
这个aa是数组的情况下,会把选中的内容存放到这个数组中

<textarea> v-model=‘a’ 可以影响文本域里面的内容

2.修饰符

.lazy

> 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy
> 修饰符,从而转为在 change 事件_之后_进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.namber

想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<input v-model.number="age" type="number">

因为即使在 type=“number” 时,html 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

.trim

要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

<input v-model.trim="msg">

以上是关于vue中表单输入和表单修饰符的主要内容,如果未能解决你的问题,请参考以下文章

Vue事件处理及表单输入绑定

Vue事件处理及表单输入绑定

Vue表单修饰符:v-model.lazyv-model.numberv-model.trim

Vue 时间修饰符之使用$event和prevent修饰符操作表单

vue表单域修饰符

Vue3的表单和开发模式