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 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP 代码规范小结
2012/03/08 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
详解a++和++a的区别
2017/08/30 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python开发之文件操作用法实例
2015/11/13 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
中专毕业生自我鉴定
2014/02/02 职场文书
活动倡议书范文
2014/05/13 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang