Vue.js進行查詢操作的實例詳解
更新時間：2017年08月25日 10:04:03 投稿：lqh
這篇文章主要介紹了Vue.js進行查詢操作的實例詳解的相關資料,需要的朋友可以參考下
Vue.js進行查詢操作的實例詳解
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript" ></script>
<title>字符轉換</title>
</head>
<body>
<div id="app">
請輸入查詢關鍵字：<input type="text" v-model="search" />
<table>
<tr>
<th>名稱</th>
<th>價格</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效率高，不需要重新渲染頁面*/
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:'手機'+i,price:1000*i,num:i})
}
</script>
</body>
</html>
效果如圖：
補充：
以上就是Vue.js進行查詢操作的實例詳解，如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要介紹了詳解vue3中渲染函數(shù)的非兼容變更，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue 2閱讀理解之initRender與callHook組件詳解
這篇文章主要為大家介紹了Vue 2閱讀理解之initRender與callHook組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了ejsExcel模板在Vue.js項目中的實際運用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
EasyPlayer.js是一款強大的H5播放器,專為現(xiàn)代網(wǎng)頁設計,提供對多種視頻流協(xié)議的支持,這篇文章主要介紹了在Vue3中使用EasyPlayer.js播放器的具體流程,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
本篇文章主要介紹了VUE2實現(xiàn)事件驅動彈窗示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue3.0找不到模塊“./App.vue”或其相應的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應的類型聲明,報錯原因是typescript?只能理解?.ts?文件，無法理解?.vue文件，本文通過多種情況分析給大家詳細講解，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue下拉框雙向聯(lián)動效果,實現(xiàn)聯(lián)動，大家都知道在vue的頁面中，想要實現(xiàn)多個<el-select 下拉框的值動態(tài)改變，必須要調用@change 函數(shù)，具體操作方法跟隨小編一起學習下吧2022-04-04
這篇文章主要介紹了vue:axios請求本地json路徑錯誤問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue實現(xiàn)圖片路徑轉二進制文件流(binary)
這篇文章主要介紹了vue實現(xiàn)圖片路徑轉二進制文件流(binary)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
本文主要介紹了vue獲取el-form的整體驗證狀態(tài)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08