Vue练习–表格数据筛选排序

目录

  • 代码案例
  • v-model
  • v-on
  • v-for
  • 计算属性
  • sort()方法


代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        .box{
            text-align: center;
        }
        .box>span{
            color: red;
            font-size: 18px;
        }
        .table-top{
            margin-top: 20px;
            text-align: center;
            margin-bottom: 40px;
        }
        .table-content{
            margin:0 auto;
        }
        .table-content span{
            background: #ff9900;
            padding: 0 6px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
    <div class="table-top">
        <input type="text" v-model="searchVal"><button>搜索</button>
    </div>
    <table border="1px" class="table-content">
        <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>
    <span>总价: {{ total }}</span>
    </div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#box',
        data:{
            goodsList:[
                {name:'三星-s8',price:5600,sales:1.2},
                {name:'锤子-坚果pro',price:2500,sales:0.8},
                {name:'iphone-6s',price:4300,sales:3.2},
                {name:'iphone-7',price:5200,sales:2.6}
            ],
            searchVal:'',    //默认输入为空
            letter:'',       //默认不排序 // 排序字段
            original:false,   //默认从小到大排列
            total:0 //默认总价
        },
        methods:{
            orderFn(letter,original){
                this.letter = letter; //排序字段
                this.original = original; //排序方式
            }
        },
        // 通过计算属性过滤数据
        computed:{
            list: function() {
                var _this = this;
                // 筛选
                var arrGoods = [];
                for (var i = 0;i < this.goodsList.length; i++)
                {
                    // 如果匹配成功, 向空数组添加数据
                    if (this.goodsList[i].name.search(this.searchVal) != -1) {
                        arrGoods.push(this.goodsList[i]);
                    }
                }

                // 升序降序排列
                // false:升序  true:降序
                if (this.letter != '') {
                    arrGoods.sort(function(a,b){
                        if(_this.original){
                            return b[_this.letter] - a[_this.letter];
                        }else{
                            return a[_this.letter] - b[_this.letter];
                        }
                    });
                }
                _this.total = 0;
                for (var i = 0;i < arrGoods.length; i++){
                    _this.total += arrGoods[i].price;
                }
                return arrGoods;
            },
            total: function(){
                return this.total;
            }
        }
    });
</script>
</html>



v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="app">
    <p>原始文本信息:{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello Vue!'
    }
})
</script>
</html>
  • 双向数据绑定
    一般用于表单元素.


v-on

  • 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
    简写成 @, 即 v-on: = @


v-for

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
  • 根据一组数组的选项列表进行渲染。


计算属性

  • 什么是计算属性
    有些数据的变化是伴随着业务逻辑计算的,data 下挂载的数据无法实现这一点.
  • 注意事项
    computed里面可以放置一些业务逻辑代码,一定记得return


sort()方法

  • 用法
    用于对数组的元素进行排序。
两种使用方法
  • 调用时未使用参数
    按照字符编码的顺序进行排序。
  • 其他标准进行排序
    如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字
Logo

前往低代码交流专区

更多推荐