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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
微信小程序实现首页弹出广告
Dec 03 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python实现随机选择元素功能
2017/09/14 Python
详解Python中的正则表达式
2018/07/08 Python
Python中作用域的深入讲解
2018/12/10 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
django框架两个使用模板实例
2019/12/11 Python
详解Django配置JWT认证方式
2020/05/09 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
初任培训自我鉴定
2013/10/07 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
高中学生自我评价范文
2014/09/23 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android