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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue中简单弹框dialog的实现方法
Feb 26 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/04 新手入门
PHP支付宝当面付2.0代码
2018/12/21 PHP
js保留两位小数使用toFixed实现
2013/07/29 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue获取form表单的值示例
2019/10/29 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
Python如何获取系统iops示例代码
2016/09/06 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
使用Python来开发微信功能
2018/06/13 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
工地安全质量标语
2014/06/07 职场文书
师范生见习自我总结
2015/06/23 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
浅谈Vue的computed计算属性
2022/03/21 Vue.js
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android