Vue中的数据监听和数据交互案例解析


Posted in Javascript onJuly 12, 2017

现在我们来看一下vue中的数据监听事件$watch,

js代码:

new Vue({
        el:"#div",
        data:{
          arr:[1,2,3]
        }
      }).$watch("arr",function () {
        alert("数据改变了")
      })

html代码:

<div id="div">
<input type="button" value="改变" @click="arr.push(5)">
<h1>
  {{arr}}
</h1>
</div>

这就是数组的监听,对于json我们也是一样的,但是我们得给他一个深度监听,$watch的第三个参数{deep:true}。

angular 中的数据交互有$http,同样对于vue我们也是有数据交互的,有post,get以及jsonp的方法。

我们在这里做一个简单的百度搜索功能

css代码:

a{
      text-decoration: none;
      color: black;
    }
    #div{
      text-align: center;
      padding-top: 50px;
    }
    input{
      height: 25px;
      width: 500px;
      border-radius: 5px;
      outline: none;
    }
    ul{
      margin-left:470px;
      margin-top: 0;
    }
    li{
      height: 25px;
      text-align: left;
      border:1px solid gray;
      list-style: none;
      width: 500px;
    }

js代码:

new Vue({
        el:"#div",
        data:{
          msg:" ",
          arr:[]
        },
        methods:{
          get:function () {
            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{
              wd:this.msg
            },{
              jsonp: 'cb'
            }).then(function(res){
              this.arr=res.data.s
            },function(s){
              console.log(s);
            });
          }
        }
      })

html代码:

<div id="div">
<input type="text" v-model="msg" @keyup="get()">
<ul>
  <li v-for="item in arr"><a href="javascript:;" rel="external nofollow" >{{item}}</a></li>
</ul>
</div>

这样一个简单的小案例就做好了。

以上所述是小编给大家介绍的Vue中的数据监听和数据交互案例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
Vue表单控件绑定图文详解
Feb 11 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
基于zepto.js实现手机相册功能
Jul 11 #Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 #Javascript
详解Webpack DLL用法以及功能
Jul 11 #Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
php利用cookies实现购物车的方法
2014/12/10 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
小学生美德少年事迹
2014/02/02 职场文书
低碳环保标语
2014/06/12 职场文书
法人授权委托书范本
2014/09/17 职场文书
商业用房租赁协议书
2014/10/13 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
使用python创建股票的时间序列可视化分析
2022/03/03 Python