VUE v-model表单数据双向绑定完整示例


Posted in Javascript onJanuary 21, 2019

本文实例讲述了VUE v-model表单数据双向绑定。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-model双向绑定</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <textarea v-model = "message" placeholer = '请在此输入文字'></textarea>
  <span>{{message}}</span>
   </br>
  <input type="text" v-model="data.name"/>
  <span>姓名:{{data.name}}</span>
  </br>
  <input type="radio" id="boy" value="男" v-model="data.gender"/>
  <label for="boy">男</label>
  <input type="radio" id="girl" value="女" v-model="data.gender"/>
  <lable for="girl">女</lable>
  <span>{{data.gender}}</span>
  <br/>
  <input type="checkbox" id="item1" value="阅读" v-model="data.interest"/>
  <lable for="item1">阅读</lable>
  <input type="checkbox" id="item2" value="打球" v-model="data.interest"/>
  <lable for="item2">打球</lable>
  <input type="checkbox" id="item3" value="体操" v-model="data.interest"/>
  <lable for="checkbox">体操</lable>
  <br/>
  <span>{{data.interest}}</span>
  <select v-model="data.identity">
    <option value="java" selected>java</option>
    <option value="web">web</option>
    <option value="hr">hr</option>
  </select>
  <span>身份:{{data.identity}}</span>
  <!--select:用 v-for 渲染的动态选项:-->
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '6',
      data: {
        name: '',
        gender: '',
        interest: [],
        identity: ''
      },
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  })
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

VUE v-model表单数据双向绑定完整示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
js中实例与对象的区别讲解
Jan 21 #Javascript
详解vue挂载到dom上会发生什么
Jan 20 #Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 #Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 #Javascript
实例介绍JavaScript中多种组合继承
Jan 20 #Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 #Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 #Javascript
You might like
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
JS中数据结构之栈
2019/01/01 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python写入已存在的excel数据实例
2018/05/03 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Django实现网页分页功能
2019/10/31 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
高中生旷课检讨书
2014/10/08 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2015元旦感言
2015/12/09 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
python 实现图片特效处理
2022/04/03 Python
MySQL添加索引特点及优化问题
2022/07/23 MySQL