vue v-model表单控件绑定详解


Posted in Javascript onMay 17, 2017

v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释。

1、v-model 双向绑定文本

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input v-model="message" placeholder="edit me">
 <p>Message is: {{ message }}</p>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   message: '绑定文本'
  }
 })
</script>
</html>

输出结果:

vue v-model表单控件绑定详解

2、v-model 双向绑定多行文本,与上面的例子相似。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <<span>Multiline message is:</span>
 <p style="white-space: pre">{{ message }}</p>
 <br>
 <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   message: '绑定多行文本'
  }
 })
</script>
</html>

输出结果:

vue v-model表单控件绑定详解

3、v-model 绑定复选框

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   checked: 'true'
  }
 })
</script>
</html>

输出结果:选中为true   不选中则为false

vue v-model表单控件绑定详解

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input type="checkbox" id="jack" value="刘二狗" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="john" value="张麻子" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="小狗子" v-model="checkedNames">
 <label for="mike">Mike</label>
 <br>
 <span>Checked names: {{ checkedNames }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   checkedNames: []
  }
 })
</script>
</html>

输出结果:

vue v-model表单控件绑定详解

4、v-model 绑定单选按钮

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <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>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   picked: ''
  }
 })
</script>
</html>

输出结果:

vue v-model表单控件绑定详解

5、v-model 绑定下拉列表

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: ''
  }
 })
</script>
</html>

输出结果:

vue v-model表单控件绑定详解

多选列表

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected" multiple style="width: 50px">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: []
  }
 })
</script>
</html>

输出结果:

vue v-model表单控件绑定详解

6、动态选项,用 v-for 渲染:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
  </option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: 'A',
   options: [
    { text: 'One', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' }
   ]
  }
 })
</script>
</html>

输出结果:

vue v-model表单控件绑定详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
javascript实现前端分页功能
Nov 26 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
You might like
数据库相关问题
2006/10/09 PHP
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php array的学习笔记
2012/05/16 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
Python面向对象编程基础解析(二)
2017/10/26 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python调用staf自动化框架的方法
2018/12/26 Python
python实现kmp算法的实例代码
2019/04/03 Python
python浪漫表白源码
2019/04/05 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
美容师的职业规划书
2013/12/27 职场文书
办理退休介绍信
2014/01/09 职场文书
个人借款担保书
2014/04/02 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
Golang中异常处理机制详解
2021/06/08 Golang