zoukankan      html  css  js  c++  java
  • vue搜索功能

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue测试2</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <style type="text/css">
    *{
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: "微软雅黑";
    }
    #box{
    500px;
    height: auto;
    border: 1px solid #ccc;
    margin: 50px auto;
    padding: 10px;
    }
    .search{
    480px;
    height: 100px;
    text-align: center;
    }
    .searchBox{
    230px;
    height: 40px;
    outline: none;
    text-indent: 10px;
    margin-right: 20px;
    }
    .btn{
    100px;
    height: 50px;
    cursor: pointer;
    font-size: 18px;
    }
    .goodsheet{
    500px;
    height: auto;
    border: 1px solid #eee;
    }
    .goodsheet tr td,
    .goodsheet tr th{
    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>
    <div id="box">
    <div class="search">
    <input type="text" class="searchBox" v-model="searchVal">
    <button class="btn">搜 索</button>
    </div>
    <table class="goodsheet">
    <tr>
    <th>商品名</th>
    <th>单价
    <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}}万</td>
    </tr>
    </table>
    </div>
    <script type="text/javascript">
    var myVueTest = new Vue({
    el:'#box',
    data:{
    goodsList:[
    //假数据
    {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:'', //默认输入为空
    letter:'', //默认不排序
    original:false //默认从小到大排列
    },
    methods:{
    orderFn(letter,original){
    this.letter = letter; //排序字段 price or sales
    this.original = original; //排序方式 up or down
    }
    },
    //通过计算属性过滤数据
    computed:{
    list: function(){
    var _this = this;
    //逻辑-->根据input的value值筛选goodsList中的数据
    var arrByZM = [];//声明一个空数组来存放数据
    for (var i=0;i<this.goodsList.length;i++){
    //for循环数据中的每一项(根据name值)
    if(this.goodsList[i].name.search(this.searchVal) != -1){
    //判断输入框中的值是否可以匹配到数据,如果匹配成功
    arrByZM.push(this.goodsList[i]);
    //向空数组中添加数据
    }
    }
    //逻辑-->升序降序排列 false: 默认从小到大 true:默认从大到小
    //判断,如果要letter不为空,说明要进行排序
    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];
    }
    });
    }
    //一定要记得返回筛选后的数据
    return arrByZM;
    }
    }
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    【转载】爸妈,求你们不要这么懂事
    【Selenium】各种方式在选择的时候应该怎么选择
    java动态绑定与静态绑定【转】
    java 字符串池【转】
    【转】java中PriorityQueue优先级队列使用方法
    【转】程序员的出路之一
    关于现在,关于未来
    计算机网络实验(router_sim)工具
    MIT算法导论课程
    最大间隙问题
  • 原文地址:https://www.cnblogs.com/tis100204/p/10760595.html
Copyright © 2011-2022 走看看