Vue2.0實(shí)現(xiàn)1.0的搜索過濾器功能實(shí)例代碼

更新時(shí)間：2017年03月20日 16:47:36 作者：姜瑞濤

本篇文章主要介紹了Vue2.0實(shí)現(xiàn)1.0的搜索過濾器功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

Vue2.0刪除了很多1.0的比較實(shí)用的過濾器，如filterBy，orderBy。官方文檔給了通過計(jì)算屬性實(shí)現(xiàn)1.0搜索過濾器功能，自己又加入了大小寫通用檢索功能，比較簡單，學(xué)一下。

<body>
  <div class="app">
    <input type="text" v-model="name">
    <ul>
      <li v-for="user in newUsers" >
        {{ user.name }}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: '.app',
      data: {
        name: '',
        users: [
          { name: 'Bruce' },
          { name: 'Chuck' },
          { name: 'Jackie' },
          { name: '趙' }
        ] 
      },
      computed: {
        newUsers: function () {
          var that = this;
          return that.users.filter(function (user) {
            return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
          })
        }

      }
    })
  </script>
</body>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
搜索

相關(guān)文章

Vue實(shí)現(xiàn)購物車實(shí)例代碼兩則
這篇文章主要介紹了Vue實(shí)現(xiàn)購物車實(shí)例代碼,需要的朋友可以參考下
2020-05-05
vue頂部菜單欄實(shí)現(xiàn)小結(jié)
這篇文章主要介紹了vue頂部菜單欄實(shí)現(xiàn)小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo
這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
vue-router的HTML5 History 模式設(shè)置
這篇文章主要介紹了vue-router的HTML5 History模式設(shè)置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
淺談Vue灰度發(fā)布新功能的使用
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案
這篇文章主要介紹了部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue2實(shí)現(xiàn)手勢密碼功能
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)手勢密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue動(dòng)態(tài)改變背景圖片demo分享
今天小編就為大家分享一篇vue動(dòng)態(tài)改變背景圖片demo分享，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
基于vue.js路由參數(shù)的實(shí)例講解——簡單易懂
下面小編就為大家?guī)硪黄趘ue.js路由參數(shù)的實(shí)例講解——簡單易懂。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例
本文主要介紹了Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-08-08