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 相关文章推荐
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
JS实现轮播图效果
Jan 11 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
在antd中setFieldsValue和defaultVal的用法
Oct 29 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
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
javascript self对象使用详解
2016/10/18 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
Python 多线程Threading初学教程
2017/08/22 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python程序 创建多线程过程详解
2019/09/23 Python
python将字母转化为数字实例方法
2019/10/04 Python
浅析python标准库中的glob
2020/03/13 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
python输入中文的实例方法
2020/09/14 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
授权委托书协议书
2014/10/16 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android