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


Posted in Javascript onDecember 03, 2018

我们可以使用 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>

效果:

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

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: ''
 }
});

效果:

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

这里对展示的内容所对应的 <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 原生事件对象。

效果:

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

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: '文学'
 }
});

效果:

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

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: ['文学','艺术']
 }
});

效果:

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

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'
 }
});

效果:

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

可以看出,如果 <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>

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

在实际应用场景,<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'}
  ]
 }
});

效果:

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

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

因为 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: '经济',
 }
});

效果:

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

示例中定义的单选框默认值为 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: ''
 }
});

效果:

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

复选框的默认值绑定的是 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: ''
 }
});

效果:

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

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

以上示例 DEMO

Javascript 相关文章推荐
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
常用jQuery选择器总结
Jul 11 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
js验证框架实现代码分享
May 18 Javascript
微信JS接口大全
Aug 25 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
js微信分享实现代码
Oct 11 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
ng-zorro-antd 入门初体验
Dec 03 #Javascript
如何使用 vue + d3 画一棵树
Dec 03 #Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 #Javascript
浅谈ng-zorro使用心得
Dec 03 #Javascript
JS跨域请求的问题解析
Dec 03 #Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
You might like
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Python实现二叉堆
2016/02/03 Python
使用python实现ANN
2017/12/20 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
旅行社各个岗位职责
2014/03/15 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
小学二年级评语
2014/04/21 职场文书
协议书范本
2014/04/23 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
关爱留守儿童标语
2014/06/18 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
JavaScript 数组去重详解
2021/09/15 Javascript
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers