中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue中的數據監聽和數據交互案例解析

發布時間:2020-10-25 16:37:40 來源:腳本之家 閱讀:125 作者:Hero^ 欄目:web開發

現在我們來看一下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)">
<h2>
  {{arr}}
</h2>
</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中的數據監聽和數據交互案例解析,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

双鸭山市| 建水县| 启东市| 分宜县| 八宿县| 托里县| 元谋县| 合川市| 沂南县| 安国市| 五家渠市| 九寨沟县| 饶河县| 卢龙县| 遂川县| 丰原市| 义乌市| 盐边县| 永年县| 云霄县| 田林县| 岳普湖县| 池州市| 湖南省| 阿坝县| 蓬安县| 镇康县| 黄平县| 梧州市| 德阳市| 庆云县| 娱乐| 阆中市| 华安县| 司法| 思南县| 和龙市| 高密市| 康保县| 文山县| 天津市|