久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

Vuejs怎么實(shí)現(xiàn)搜索匹配功能-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Vuejs怎么實(shí)現(xiàn)搜索匹配功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)西烏珠穆沁免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

最近一直在看vue，查了很多資料，看了很多文檔和博客，大概半知半解了，然后利用所理解的知識(shí)寫了一個(gè)簡(jiǎn)單的搜索匹配功能。

大概長(zhǎng)這個(gè)樣子：

Vuejs怎么實(shí)現(xiàn)搜索匹配功能

數(shù)據(jù)都是假的

代碼部分

（注意我引用的是本地vue.min.js文件，請(qǐng)注意文件路徑。）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue測(cè)試2</title>
    <script type="text/javascript" src="vue.min.js"></script>
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
        font-size: 14px;
        font-family: "微軟雅黑";
      }
      #box{
        width: 500px;
        height: auto;
        border: 1px solid #ccc;
        margin: 50px auto;
        padding: 10px;
      }
      .search{
        width: 480px;
        height: 100px;
        text-align: center;
      }
      .searchBox{
        width: 230px;
        height: 40px;
        outline: none;
        text-indent: 10px;
        margin-right: 20px;
      }
      .btn{
        width: 100px;
        height: 50px;
        cursor: pointer;
        font-size: 18px;
      }
      .goodsheet{
        width: 500px;
        height: auto;
        border: 1px solid #eee;
      }
      .goodsheet tr td,
      .goodsheet tr th{
        width: 33%;
        border: 1px solid #eee;
        padding: 5px 10px;
        text-align: left;
      }
      .goodsheet tr th span{
        background: #ff9900;
        padding: 0 6px;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p id="box">
      <p class="search">
        <input type="text" class="searchBox" v-model="searchVal">
        <button class="btn">搜 索</button>
      </p>
      <table class="goodsheet">
        <tr>
          <th>商品名</th>
          <th>單價(jià)
            <span @click="orderFn('price', false)">↑</span>
            <span @click="orderFn('price', true)">↓</span>
          </th>
          <th>銷量
            <span @click="orderFn('sales', false)">↑</span>
            <span @click="orderFn('sales', true)">↓</span>
          </th>
        </tr>
        <tr v-for='(item, key) in list'>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>{{item.sales}}萬(wàn)</td>
        </tr>
      </table>
    </p>
    <script type="text/javascript">
      var myVueTest = new Vue({
        el:'#box',
        data:{
          goodsList:[
            //假數(shù)據(jù)
            {name:"三星Galaxy Note8",price:5200,sales:2.6},
            {name:"iphone5s",price:2500,sales:2.2},
            {name:"iphone6",price:2800,sales:1.6},
            {name:"iphone6s",price:3200,sales:2.9},
            {name:"iphone7",price:3800,sales:12.6},
            {name:"iphone7plus",price:4200,sales:2.1},
            {name:"iphone8",price:5500,sales:10.6},
            {name:"華為",price:4600,sales:7.6},
            {name:"小米",price:1200,sales:32.6},
            {name:"OPPOR11",price:3000,sales:1.2},
            {name:"vivoX20",price:3250,sales:2.9}
          ],
          searchVal:'',  //默認(rèn)輸入為空
          letter:'',    //默認(rèn)不排序
          original:false  //默認(rèn)從小到大排列
        },
        methods:{
          orderFn(letter,original){
            this.letter = letter;    //排序字段 price or sales 
            this.original = original;  //排序方式 up or down
          }
        },
        //通過(guò)計(jì)算屬性過(guò)濾數(shù)據(jù)
        computed:{
          list: function(){
            var _this = this;
            //邏輯-->根據(jù)input的value值篩選goodsList中的數(shù)據(jù)
            var arrByZM = [];//聲明一個(gè)空數(shù)組來(lái)存放數(shù)據(jù)
            for (var i=0;i<this.goodsList.length;i++){
              //for循環(huán)數(shù)據(jù)中的每一項(xiàng)（根據(jù)name值）
              if(this.goodsList[i].name.search(this.searchVal) != -1){
                //判斷輸入框中的值是否可以匹配到數(shù)據(jù)，如果匹配成功
                arrByZM.push(this.goodsList[i]);
                //向空數(shù)組中添加數(shù)據(jù)
              }
            }
            //邏輯-->升序降序排列 false: 默認(rèn)從小到大 true：默認(rèn)從大到小
            //判斷，如果要letter不為空，說(shuō)明要進(jìn)行排序
            if(this.letter != ''){
              arrByZM.sort(function( a , b){
                if(_this.original){
                  return b[_this.letter] - a[_this.letter];
                }else{
                  return a[_this.letter] - b[_this.letter];
                }
              });
            }
            //一定要記得返回篩選后的數(shù)據(jù)
            return arrByZM;
          }
        }
      });
    </script>
  </body>
</html>

其實(shí)核心算法還是用原生JS寫的，vue提供了很強(qiáng)大的數(shù)據(jù)綁定方法，但是如果只知道vue這個(gè)框架，沒(méi)有自己的核心思想的話，還是沒(méi)多大用處的，所以作者在官方文檔里面說(shuō)希望我們是有一定JS基礎(chǔ)的。我還是覺(jué)得前端框架再多，最厲害的永遠(yuǎn)是原生JS。

感謝各位的閱讀！關(guān)于Vuejs怎么實(shí)現(xiàn)搜索匹配功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前文章：Vuejs怎么實(shí)現(xiàn)搜索匹配功能-創(chuàng)新互聯(lián)
鏈接URL：http://sd-ha.com/article38/shpsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)建站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)