vue项目实战（二）：表单输入绑定v-model

最新推荐文章于 2023-02-15 14:03:43 发布

Ordinary_yfz

最新推荐文章于 2023-02-15 14:03:43 发布

阅读量340

点赞数 1

分类专栏：开发文章标签： vue javascript js

本文链接：https://blog.csdn.net/csyifanZhang/article/details/104952864

版权

开发专栏收录该内容

32 篇文章 1 订阅

订阅专栏

文章目录

一、基础用法

一、基础用法

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意v-model双向绑定对表单元素而言。绑定的永远是value属性。

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

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

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

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过
程中得到更新。如果你也想处理这个过程，请使用 input 事件。

1、v-model的实现原理

如下代码的作用时创建一个文本框，你在里面书写的时候会不断的改变msg数据的值，同时将msg显示出来，

   <div id="app">
     <input type="text" v-model='msg'>
     <h3>{{msg}}</h3>
   </div>
   <script type="text/javascript">
    vm = new Vue({
      el:"#app",
      data:function(){
        return{
          msg:"yfZhang",
        }
      }
    })
  </script>

如果我们不使用v-model，那么应该如何实现这个功能呢？不妨使用v-bind与v-on试一试，（单纯的使用v-bind或v-on只能使得一方的数据发生更改）。下述代码就实现了这个功能，先将表单的value元素与msg数据项进行绑定，然后每次用on指令监听数据的改变，每次发生改变就重新赋值。总体就是这么一个过程。

 <body>
   <div id="app">
     <input type="text" :value="msg" @input='valueChange'>
     <h3>{{msg}}</h3>
   </div>
   <script type="text/javascript">
    vm = new Vue({
      el:"#app",
      data:function(){
        return{
          msg:"yfZhang",
        }
      },
      methods:{
        valueChange(e){
          this.msg = e.target.value;//e.target即触发条件的文本框
        }
      }
    })
  </script>
 </body>

2、文本框的绑定

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

3、复选框的绑定

多个复选框，绑定到同一个数组：
不仅可以计数，而且能拿到value属性的值，如果没有赋值value，则显示null

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

在这里插入图片描述

4、单选按钮的绑定

再-传回的值是value，根据ratio的value值修改vue对应的数据元素。

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

在这里插入图片描述

5、下拉选择框

单选时：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

 new Vue({
   el: '#example-5',
   data: {
     selected: ''
   }
 })

当然也可以进行多选，只需要绑定到数组就好了。

Ordinary_yfz

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue项目实战（二）：表单输入绑定v-model

文章目录一、基础用法1、v-model的实现原理2、文本框的绑定3、复选框的绑定4、单选按钮的绑定5、下拉选择框一、基础用法v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件...
复制链接

扫一扫