Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
更新時間：2017年07月12日 09:03:14 作者：Hero^
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析,在文章開頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽事件$watch，具體代碼講解，大家可以參考下本文
現(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)">
<h1>
{{arr}}
</h1>
</div>
這就是數(shù)組的監(jiān)聽，對于json我們也是一樣的，但是我們得給他一個深度監(jiān)聽，$watch的第三個參數(shù){deep:true}。
angular 中的數(shù)據(jù)交互有$http,同樣對于vue我們也是有數(shù)據(jù)交互的，有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中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章給大家介紹了Vue3快速實現(xiàn)文件上傳OSS的方法,上傳文件可以說是經(jīng)典的需求了,在后臺管理項目中隨處可見,一般是由前端進行文件上傳,然后再由后端去處理,本文旨在實現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下2024-01-01
vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置
本文主要介紹了vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了IE9 elementUI文件上傳的問題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對各位有所幫助2018-10-10
vue用復選框?qū)崿F(xiàn)組件且支持單選和多選操作方式
這篇文章主要介紹了vue用復選框?qū)崿F(xiàn)組件且支持單選和多選操作方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue中keep-alive的用法及問題描述,本文給大家介紹的非常詳細，具有一定的參考解決價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue中安裝使用cesium方式(親測可用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
使用VUE3開發(fā)很久了,但一直沒進行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項目搭建的詳細過程,需要的朋友可以參考下2022-10-10
我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?這篇文章主要給大家介紹了關(guān)于vue打包之后的dist文件如何運行的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue預覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法
這篇文章主要介紹了vue預覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue 中url 鏈接左邊的小圖標更改問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12