溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析

發(fā)布時(shí)間：2020-10-25 16:37:40 來源：腳本之家 閱讀：124 作者：Hero^ 欄目：web開發(fā)

現(xiàn)在我們來看一下vue中的數(shù)據(jù)監(jiān)聽事件$watch，

js代碼：

new Vue({
        el:"#div",
        data:{
          arr:[1,2,3]
        }
      }).$watch("arr",function () {
        alert("數(shù)據(jù)改變了")
      })

html代碼：

<div id="div">
<input type="button" value="改變" @click="arr.push(5)">
<h2>
  {{arr}}
</h2>
</div>

這就是數(shù)組的監(jiān)聽，對(duì)于json我們也是一樣的，但是我們得給他一個(gè)深度監(jiān)聽，$watch的第三個(gè)參數(shù){deep:true}。

angular 中的數(shù)據(jù)交互有$http,同樣對(duì)于vue我們也是有數(shù)據(jù)交互的，有post，get以及jsonp的方法。

我們?cè)谶@里做一個(gè)簡(jiǎn)單的百度搜索功能

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>

這樣一個(gè)簡(jiǎn)單的小案例就做好了。

以上所述是小編給大家介紹的Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手