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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
JsDom 编程小结
Aug 09 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
tsconfig.json配置详解
May 17 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
原生JS运动实现轮播图
Jan 02 Javascript
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判断GIF图片是否为动画的方法
2020/09/04 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
jQuery select控制插件
2009/08/17 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
wxPython实现带颜色的进度条
2019/11/19 Python
django教程如何自学
2020/07/31 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
出国留学自荐信
2013/10/25 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
春季防火方案
2014/05/10 职场文书
党员公开承诺书内容
2014/05/20 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android