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

Vue练习–表格数据筛选排序目录代码案例v-modelv-onv-for计算属性sort()方法代码案例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title

则若

6830人浏览 · 2018-09-07 15:30:11

则若 · 2018-09-07 15:30:11 发布

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

代码案例

<!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()方法

用法
用于对数组的元素进行排序。

两种使用方法

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^