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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 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
php5 图片验证码实现代码
2009/12/11 PHP
php 面向对象的一个例子
2011/04/12 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python装饰器初探(推荐)
2016/07/21 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
校长一岗双责责任书
2015/05/09 职场文书
升学宴家长答谢词
2015/09/29 职场文书