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判断一个URL链接是否有效的实现方法
Oct 08 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
详解Document.Cookie
Dec 25 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
图形数字验证代码
2006/10/09 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
vue-父子组件和ref实例详解
2019/11/10 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python中装饰器高级用法详解
2017/12/25 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
中英文求职信范文
2014/01/27 职场文书
初中同学聚会感言
2014/02/11 职场文书
关于元旦的广播稿
2014/02/16 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
党员岗位承诺书
2014/03/25 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书