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笔记一 js以及json基础使用说明
May 22 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
发现的以前不知道的函数
2006/09/19 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
vue实现分页栏效果
2019/06/28 Javascript
python实现图片批量剪切示例
2014/03/25 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python梯度下降法的简单示例
2018/08/31 Python
降低python版本的操作方法
2020/09/11 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
农业资源与环境专业自荐信范文
2013/12/30 职场文书
安全生产检查通报
2014/01/29 职场文书
手机被没收检讨书
2014/02/22 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
先进班组材料范文
2014/12/25 职场文书
工作保证书怎么写
2015/02/28 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Pygame Event事件模块的详细示例
2021/11/17 Python
css3 文字断裂效果
2022/04/22 HTML / CSS