快捷導(dǎo)航

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效率高，不需要重新渲染頁面*/
        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í)例詳解，如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解vue3中渲染函數(shù)的非兼容變更
這篇文章主要介紹了詳解vue3中渲染函數(shù)的非兼容變更，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
Vue 2閱讀理解之initRender與callHook組件詳解
這篇文章主要為大家介紹了Vue 2閱讀理解之initRender與callHook組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用
這篇文章主要介紹了ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
在Vue3中使用EasyPlayer.js播放器的具體流程
EasyPlayer.js是一款強(qiáng)大的H5播放器,專為現(xiàn)代網(wǎng)頁設(shè)計(jì),提供對(duì)多種視頻流協(xié)議的支持,這篇文章主要介紹了在Vue3中使用EasyPlayer.js播放器的具體流程,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
VUE2實(shí)現(xiàn)事件驅(qū)動(dòng)彈窗示例
本篇文章主要介紹了VUE2實(shí)現(xiàn)事件驅(qū)動(dòng)彈窗示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報(bào)錯(cuò)原因是typescript?只能理解?.ts?文件，無法理解?.vue文件，本文通過多種情況分析給大家詳細(xì)講解，需要的朋友可以參考下
2023-01-01
Vue下拉框雙向聯(lián)動(dòng)效果的示例代碼
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧
2022-04-04
vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決
這篇文章主要介紹了vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue實(shí)現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)
這篇文章主要介紹了vue實(shí)現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue獲取el-form的整體驗(yàn)證狀態(tài)
本文主要介紹了vue獲取el-form的整體驗(yàn)證狀態(tài)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08