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 相关文章推荐
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
vue项目中axios使用详解
Feb 07 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
vue视频播放暂停代码
Nov 08 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
校园奶茶店创业计划书
2014/01/23 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python