表单输入绑定

v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值.如下面代码所示,在input里输入数字,按钮上的值会变化.点击按钮,input里的数字也发生了改变,这就是双向绑定.

  <div id="app">
    <label for="">输入:</label>
    <input type="text" v-model="num">
    <button @click="num++">{{num}}</button>
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        num:1
      }
    })
  </script>

绑定的属性和事件

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

text和textarea元素使用value属性和input事件
checkbox和redio使用checked属性和change事件
select字段将value作为prop并将change作为事件

表单元素绑定

input绑定

<input v-model="message" placeholder="请输入...">
<p>输入的内容是：{{ message }}</p>

textarea绑定

<textarea cols="30" rows="10" v-model="message"></textarea>
<span>在textarea中输入的内容是:{{message}}</span>

checkbox绑定

checkbox是多选框,复选框

<input type="checkbox" value="YS" v-model="checknames">YS
<input type="checkbox" value="YMT" v-model="checknames">YMT
<input type="checkbox" value="YYH" v-model="checknames">YYH
<span>您选择了:{{checknames}}</span>

radio绑定

radio是单选框

<input type="radio" value="1" v-model="gender">男
<input type="radio" value="2" v-model="gender">女
<span>您选择了:{{gender}}</span>

select绑定

<select v-model="selectname" >
 <option selected value="" disabled>请选择</option>
   <option value="1">河南</option>
   <option value="2">河北</option>
   <option value="3">北京</option>
 </select>
 <span>您选择了:{{selectname}}</span>

修饰符

.lazy
在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步.有可能你需要一次性的输入完内容然后在同步,而不是你输入1个字符就同步1个字符,这时你可以添加.lazy修饰符,从而达到上述需求:

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

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

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

这通常很有用,因为即使在type="number"时,html输入元素的值也总会返回字符串.如果这个值无法被parseFloat()解析，则会返回原始的值.
.trim
如果要自动过滤用户输入的首尾空白字符,乐意给v-model添加trim修饰符

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

来源：CSDN

作者：唯美清泠

链接：https://blog.csdn.net/qq_43677746/article/details/103809696

标签

input

html表单