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的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
Vue中的methods、watch、computed的区别
Nov 26 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对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python编程实现正则删除命令功能
2017/08/30 Python
用python实现百度翻译的示例代码
2018/03/09 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
ipython和python区别详解
2019/06/26 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
安卓程序员求职信
2014/02/28 职场文书
股东出资证明书范例
2014/10/04 职场文书
车间质检员岗位职责
2015/04/08 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电