Vue表单demo v-model双向绑定问题


Posted in Javascript onJune 29, 2018

具体代码如下所示:

<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>
</div>
<script src="js/vue.js"></script>
<script>
 new Vue({
  el: '#app',
  data: {
   message: '6',
   data: {
    name: '',
    gender: '',
    interest: [],
    identity: ''
   },
  }
 })
</script>

总结

以上所述是小编给大家介绍的Vue表单demo v-model双向绑定问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
JQuery基础语法小结
Feb 27 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue底部加载更多的实例代码
Jun 29 #Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 #Javascript
vue项目打包后打开页面空白解决办法
Jun 29 #Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 #Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 #Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 #Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 #Javascript
You might like
PHP.vs.JAVA
2016/04/29 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
幼儿园教师节演讲稿
2014/09/03 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
导游词之临安白水涧
2019/11/05 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python