ijava学习网> 知识分享> HTML5> vue.js数据双向绑定的详解

vue.js数据双向绑定的详解

时间: 2018-09-25 11:21:09 标签lang , vue.js

代码:

Hello world提交{{item}}var app = new Vue({
               el:'#app',
               data:{
                   list:[],
                   inputValue:''
               },
               methods:{
                   handleBtnClick: function(){
                       this.list.push(this.inputValue);
                       this.inputValue='';
                   }
               }
           })

v-model: 在表单或者组件上创建双向绑定,这里绑定vue实例中的inputValue值。双向绑定的意思是指:vue实例中的inputValue值变化,页面上的值也会变化,页面上的值变化,vue实例中变量的值也会变化,也就是mvvm。

v-on: 绑定事件,这里绑定click事件,触发handleBtnClick这个方法。

v-for:是循环,把list里面的值放到item中,然后再标签中显示。

页面显示效果如下,点击提交,元素会放到下面列表中。

 

版权说明| 关于ijava| 合作伙伴| 联系我们| 网站地图| 招贤纳士

Copyright © 2017 www.ijava.com All Rights Reserved 版权所有•ijava学习网 京ICP备14061482号-18         官方QQ:3325669927

ijava学习网提供免费java教程和大量java面试题库,给高级会员提供免费的java培训,同时提共一些java开发项目和java下载,java工程师,java菜鸟们快来哦。记住我们的网站:www.ijava.com