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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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 上传文件的方法(类)
2009/07/30 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
php集成动态口令认证
2016/07/21 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python打印斐波拉契数列实例
2015/07/07 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
pygame实现成语填空游戏
2019/10/29 Python
Python生成词云的实现代码
2020/01/14 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
期末总结的个人自我评价
2013/11/02 职场文书
周年庆促销方案
2014/03/15 职场文书
幼儿园安全责任书
2014/04/14 职场文书
青年志愿者活动方案
2014/08/17 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
2015年度信用社工作总结
2015/05/04 职场文书