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之学会吝啬 精简代码
Apr 25 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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
php split汉字
2009/06/05 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
索趣科技的答案
2007/02/07 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
写给小白看的JavaScript异步
2017/11/29 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Python3.6正式版新特性预览
2016/12/15 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
python制作朋友圈九宫格图片
2019/11/03 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
检讨书怎么写
2015/01/23 职场文书
基于python实现银行管理系统
2021/04/20 Python
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js