Vue.js進(jìn)行查詢操作的實(shí)例詳解
更新時(shí)間：2017年08月25日 10:04:03 投稿：lqh
這篇文章主要介紹了Vue.js進(jìn)行查詢操作的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
Vue.js進(jìn)行查詢操作的實(shí)例詳解
實(shí)例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript" ></script>
<title>字符轉(zhuǎn)換</title>
</head>
<body>
<div id="app">
請(qǐng)輸入查詢關(guān)鍵字：<input type="text" v-model="search" />
<table>
<tr>
<th>名稱</th>
<th>價(jià)格</th>
<th>數(shù)量</th>
</tr>
<tr v-for='x in list'>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.num}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
/*定義空數(shù)組裝信息*/
info:[],
/*定義變量裝查詢輸入的字符串*/
search:''
},
/*computed比methods效率高，不需要重新渲染頁(yè)面*/
computed:{
list:function(){
var arr =[];
for(var i=0;i<this.info.length;i++){
if(this.info[i].name.indexOf(this.search)!=-1){
arr.push(this.info[i])
}
}
return arr;
}
}
})
for(var i = 1;i<20;i++){
vm.info.push({name:'手機(jī)'+i,price:1000*i,num:i})
}
</script>
</body>
</html>
效果如圖：
補(bǔ)充：
以上就是Vue.js進(jìn)行查詢操作的實(shí)例詳解，如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:
- Vue實(shí)現(xiàn)動(dòng)態(tài)查詢規(guī)則生成組件
- Vue按時(shí)間段查詢數(shù)據(jù)組件使用詳解
- vue input輸入框模糊查詢的示例代碼
- vue實(shí)現(xiàn)Input輸入框模糊查詢方法
- Vue.js實(shí)現(xiàn)分頁(yè)查詢功能
- Vue實(shí)現(xiàn)點(diǎn)擊時(shí)間獲取時(shí)間段查詢功能
- 利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)（附源碼）
- 基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能
- 使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁(yè)查詢的示例代碼
- vue+element自定義查詢組件
相關(guān)文章
vue 打包后的文件部署到express服務(wù)器上的方法
vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進(jìn)行前后端分離的開(kāi)發(fā)，下面通過(guò)本文給大家分享vue 打包后的文件部署到express服務(wù)器上的方法，感興趣的朋友一起看看吧2017-08-08
vue-cli 自定義指令directive 添加驗(yàn)證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗(yàn)證滑塊示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
詳解vue組件化開(kāi)發(fā)-vuex狀態(tài)管理庫(kù)
本篇文章主要介紹了詳解vue組件化開(kāi)發(fā)-vuex狀態(tài)管理庫(kù)，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
vue使用swiper插件實(shí)現(xiàn)垂直輪播圖
這篇文章主要介紹了vue使用swiper插件實(shí)現(xiàn)垂直輪播圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式
這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
element ui loading加載開(kāi)啟與關(guān)閉方式
這篇文章主要介紹了element ui loading加載開(kāi)啟與關(guān)閉方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue中用props給data賦初始值遇到的問(wèn)題解決
這篇文章主要介紹了Vue中用props給data賦初始值遇到的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue自定義Form組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10