Vue中的數據監(jiān)聽和數據交互案例解析
更新時間：2017年07月12日 09:03:14 作者：Hero^
這篇文章主要介紹了Vue中的數據監(jiān)聽和數據交互案例解析,在文章開頭部分先給大家介紹了vue中的數據監(jiān)聽事件$watch，具體代碼講解，大家可以參考下本文
現(xiàn)在我們來看一下vue中的數據監(jiān)聽事件$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>
這就是數組的監(jiān)聽，對于json我們也是一樣的，但是我們得給他一個深度監(jiān)聽，$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中的數據監(jiān)聽和數據交互案例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
解決vue-cli webpack打包開啟Gzip 報錯問題
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報錯問題的解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue 解決兄弟組件、跨組件深層次的通信操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
響應式?API?賦予了組合式?API?一大坨可能性的同時,代碼精簡,雖然但是,我們應該意識到響應性的某些陷阱,比如丟失響應性,在本文中,我們將學習如何正確解構?Vue?組件的?props,使得?props?不會丟失響應性2024-01-01
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過示例為大家進行了詳細講解，對Vue感興趣的同學，可以學習一下2022-04-04
今天小編就為大家分享一篇Vue 監(jiān)聽列表item渲染事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)商品規(guī)格選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實例的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
Element控件Tree實現(xiàn)數據樹形結構的示例代碼
我們在開發(fā)中肯定會遇到用樹形展示數據的需求,本文主要介紹了Element控件Tree實現(xiàn)數據樹形結構的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
關于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇vue-自定義組件傳值的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09