Vue.js 中的 v-model 指令及绑定表单元素的方法

更新时间：2018年12月03日 09:20:54 作者：deniro

这篇文章主要介绍了Vue.js 中的 v-model 指令及绑定表单元素的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。

1 基础用法

1.1 文本输入框（text）

这里演示了在文本输入框上输入的内容，会实时映射到绑定的数据上。

html：

<div id="app">
 <input type="text" v-model="content" placeholder="请输入">
 <p>输入框：{{content}}</p>
</div>

js：

<script>
 var app = new Vue({
  el: '#app',
  data: {
   content: ''
  }
 });
</script>

效果：

1.2 大文本输入框（textarea）

绑定方法与文本输入框相同。

html：

<div id="app2">
 <textarea v-model="content" placeholder="请输入"></textarea>
 <p>内容：</p>
 <p style="white-space: pre">{{content}}</p>
</div>

js：

var app2 = new Vue({
 el: '#app2',
 data: {
  content: ''
 }
});

效果：

这里对展示的内容所对应的 <p> 元素加了 white-space: pre 样式，这样内容即使带有回车符也会保留。

--------------------------------------------------------------------------------

注意：表单控件所显示的值只依赖于所绑定的数据，所以即便设置了表单控件中的 value值，也不会起作用哦。同理，<textarea>xxx</textarea>之间的值也无效。

之前的示例我们可以发现，使用中文输入法时，只有确定选中的词语，才会被如果 Vue.js 所更新。如果希望输入的内容实时更新，那么可以使用 @input。

html：

<div id="app3">
 <textarea @input="inputHandler" placeholder="请输入"></textarea>
 <p>内容：</p>
 <p style="white-space: pre">{{content}}</p>
</div>

js：

var app3 = new Vue({
 el: '#app3',
 data: {
  content: ''
 },
 methods: {
  inputHandler: function (event) {
   this.content = event.target.value;
  }
 }
});

可以看出，即使在 @input 定义的函数不带参数，Vue.js 也会在定义的函数（示例中的 inputHandler）中传入 event 原生事件对象。

效果：

1.3 单选框

单选框一般都有多个条件可供选择，既然是单选框，自然希望实现互斥效果，我们可以使用 v-model 指令配合单选框的 value 来实现。

html：

<div id="app4">
 <input id="radio1" type="radio" v-model="checked" value="文学">
 <label for="radio1">文学</label>
 <input id="radio2" type="radio" v-model="checked" value="艺术">
 <label for="radio2">艺术</label>
 <input id="radio3" type="radio" v-model="checked" value="经济">
 <label for="radio3">经济</label>
 <br>
 <p>选择了：{{checked}}</p>
</div>

js：

var app4 = new Vue({
 el: '#app4',
 data: {
  checked: '文学'
 }
});

效果：

1.4 复选框

复选框的绑定方式与单选框相同，只不过复选框所对应的数据类型是数组罢了。

html：

<div id="app5">
 <input id="checkbox1" type="checkbox" v-model="checked" value="文学">
 <label for="checkbox1">文学</label>
 <input id="checkbox2" type="checkbox" v-model="checked" value="艺术">
 <label for="checkbox2">艺术</label>
 <input id="checkbox3" type="checkbox" v-model="checked" value="经济">
 <label for="checkbox3">经济</label>
 <br>
 <p>选择了：{{checked}}</p>
</div>

js：

var app5= new Vue({
 el: '#app5',
 data: {
  checked: ['文学','艺术']
 }
});

效果：

1.5 下拉选择框

1.5.1 单选

html：

<div id="app6">
 <select v-model="selected">
  <option value="1">文学</option>
  <option value="2">艺术</option>
  <option>经济</option>
 </select>
 <br>
 <p>选择了：{{selected}}</p>
</div>

js：

var app6 = new Vue({
 el: '#app6',
 data: {
  selected: '1'
 }
});

效果：

可以看出，如果 <option> 含有 value 值，则会先匹配该值；如果没有，则匹配 <option> 中的 text 值（比如示例中的 <option>经济</option>）。

1.5.2 多选

为 <select> 标签添加 multiple 属性，即可实现多选。

html：

<div id="app7">
 <select v-model="selected" multiple>
  <option value="1">文学</option>
  <option value="2">艺术</option>
  <option>经济</option>
 </select>
 <br>
 <p>选择了：{{selected}}</p>
</div>

在实际应用场景，<select> 标签中的 <opinion> 一般是通过 v-for 指令动态输出的，其中每一项的 value 或 text 都可以使用 v-bind 动态输出的。

html：

<div id="app8">
 <select v-model="selected">
  <option v-for="option in options"
     :value="option.value">{{option.text}}
  </option>
 </select>
 <br>
 <p>选择了：{{selected}}</p>
</div>

js：

var app8 = new Vue({
 el: '#app8',
 data: {
  selected: '1',
  options: [
   {text: '文学', value: '1'},
   {text: '艺术', value: '2'}
  ]
 }
});

效果：

--------------------------------------------------------------------------------

因为 select 标签的呈现样式依赖于浏览器，所以在实际业务场景中，我们更多的是使用 div 来模拟 select 标签的列表功能，而这可以通过使用 Vue.js 自定义组件的方式来实现一个通用的下拉选择组件。

以上示例 DEMO

2 绑定动态变量

之前所说的示例，v-model 绑定的都是静态变量。我们可以使用 v-bind 来绑定动态变量。

2.1 单选框

html：

<div id="app">
 <input id="radio1" type="radio" v-model="picked" :value="value">
 <label for="radio1">文学</label>
 <input id="radio2" type="radio" v-model="picked" :value="value2">
 <label for="radio2">艺术</label>
 <input id="radio3" type="radio" v-model="picked" :value="value3">
 <label for="radio3">经济</label>
 <br>
 <p>{{picked}}</p>
 <p>{{value}},{{value2}},{{value3}}</p>
</div>

js：

var app = new Vue({
 el: '#app',
 data: {
  picked: false,
  value: '文学',
  value2: '艺术',
  value3: '经济',
 }
});

效果：

示例中定义的单选框默认值为 picked 所定义的 false。当选中某个单选框时，则动态绑定在 :value 中定义的变量。

2.2 复选框

html：

<div id="app2">
 <input id="checkbox" type="checkbox" v-model="checked" :true-value="value1" :false-value="value2">
 <label for="checkbox">开关</label>
 <p>checked：{{checked}}</p>
 <p>value1：{{value1}}</p>
 <p>value2：{{value2}}</p>
</div>

js：

var app2 = new Vue({
 el: '#app2',
 data: {
  value1: '亮',
  value2: '暗',
  checked: ''
 }
});

效果：

复选框的默认值绑定的是 v-model 定义的变量，而勾选与取消勾选所绑定的值，则分别由 :true-value 与 false-value 来实现动态绑定。

2.3 下拉选择框

html：

<div id="app3">
 <select v-model="selected">
  <option :value="{number:1}">文学</option>
  <option :value="{number:2}">艺术</option>
 </select>
 <br>
 <p>选择了：{{selected.number}}</p>
</div>

js：

var app3 = new Vue({
 el: '#app3',
 data: {
  selected: ''
 }
});

效果：

当选中某个 option 时，app3.selected 为 Object，所以 selected.number 即为 :value 定义的绑定值。

以上示例 DEMO

您可能感兴趣的文章:

对 Vue-Router 进行单元测试的方法
这篇文章主要介绍了对 Vue-Router 进行单元测试的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue 实现滚动到底部翻页效果(pc端)
这篇文章主要介绍了pc端vue 滚动到底部翻页效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-07-07
vue项目中vue.config.js文件详解
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载,这篇文章主要介绍了vue项目中vue.config.js文件的介绍,需要的朋友可以参考下
2024-02-02
Vue使用Echarts实现横向柱状图,并通过WebSocket即时通讯更新
这篇文章主要介绍了Vue使用Echarts实现横向柱状图,并通过WebSocket即时通讯更新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue2.0仿饿了么webapp单页面应用详细步骤
本篇文章给大家分享了Vue2.0仿饿了么webapp单页面应用详细步骤，有兴趣的朋友可以跟着操作下。
2018-07-07
element-ui图像组件、上传组件以及分页组件实现代码
工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家,这篇文章主要给大家介绍了关于element-ui图像组件、上传组件以及分页组件实现的相关资料,需要的朋友可以参考下
2024-02-02
Vue语法和标签的入门使用教程
Vue是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue语法和标签使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue滚动页面到指定位置的实现及避坑
这篇文章主要介绍了Vue滚动页面到指定位置的实现及避坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
如何在 Vue 中使用 Axios 异步请求API
Axios 是 Javascript 中最受欢迎的 HTTP 库之一，我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用，可以用这个小程序学习英语，同时也能从侃爷的话中得到一些启发，而且还可以学习用 Vue 异步请求API，一举多得，何乐而不为呢？
2021-05-05
打通前后端构建一个Vue+Express的开发环境
这篇文章主要介绍了打通前后端构建一个Vue+Express的开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07