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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 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+javascript模拟Matrix画面
2006/10/09 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
浅谈Vue.js
2017/03/02 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
node内置调试方法总结
2018/02/22 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python3实现的字典遍历操作详解
2018/04/18 Python
windows下python安装pip图文教程
2018/05/25 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
英文版网络工程师求职信
2013/10/28 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
员工升职自荐信
2015/03/27 职场文书
被告代理词范文
2015/05/25 职场文书
在人间读书笔记
2015/06/30 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python