Vue.js進行查詢操作的實例詳解
更新時間：2017年08月25日 10:04:03 投稿：lqh
這篇文章主要介紹了Vue.js進行查詢操作的實例詳解的相關(guān)資料,需要的朋友可以參考下
Vue.js進行查詢操作的實例詳解
實例代碼：
<!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">
請輸入查詢關(guān)鍵字：<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ū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
vue 打包后的文件部署到express服務(wù)器上的方法
vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進行前后端分離的開發(fā)，下面通過本文給大家分享vue 打包后的文件部署到express服務(wù)器上的方法，感興趣的朋友一起看看吧2017-08-08
vue-cli 自定義指令directive 添加驗證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗證滑塊示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本篇文章主要介紹了詳解vue組件化開發(fā)-vuex狀態(tài)管理庫，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了vue使用swiper插件實現(xiàn)垂直輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了VUE前端實現(xiàn)token的無感刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
element ui loading加載開啟與關(guān)閉方式
這篇文章主要介紹了element ui loading加載開啟與關(guān)閉方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue中用props給data賦初始值遇到的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了解決vue內(nèi)存溢出報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue自定義Form組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10