溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
現在我們來看一下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中的數據監聽和數據交互案例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
