提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue学习之--------列表排序（ffilter、sort、indexOf方法的使用）、Vue检测数据变化的原理（2022/7/15）

Vue列表方法学习排序数据原理 2022
2023-09-14 09:07:25 时间

文章目录

1、列表排序

1.1 、代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">升序</button>
        <button @click="sortType = 1">降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>

        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false


        //用computed实现
        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                sortType: 0,
                persons: [
                    { id: '001', name: '马冬梅', age: 43, sex: '女' },
                    { id: '002', name: '周冬雨', age: 20, sex: '女' },
                    { id: '003', name: '周杰伦', age: 51, sex: '男' },
                    { id: '004', name: '温兆伦', age: 22, sex: '男' }
                ]
            },
            computed: {
                filPerons() {
                    const arr = this.persons.filter((p) => {
                        alert(p.name.indexOf(this.keyWord) !== -1)
                        return p.name.indexOf(this.keyWord) !== -1
                    })

                    //判断是否要排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })

                    }
                    return arr
                }
            }
        })
    </script>

</html>

1.2 、测试效果

在这里插入图片描述

在这里插入图片描述

1.3、需要掌握的前提知识

filter()方法
在这里插入图片描述
在这里插入图片描述
sort()方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、Vue监测数据变化的原理

2.1、代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1>姓名:{{name}}</h1>
        <h1>性别:{{student.name}}</h1>


    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            data: {
                name: "ZYZ",
                sex: "man",
                student:{
                    name:'张三',
                    sex:"男",
                    friends:[
                        {name:'李四',sex:"男"},
                        {name:'麻子',sex:"男"}
                    ]
                }
            }
        })
    </script>

</body>

</html>

2.2 、测试效果

在这里插入图片描述

3、Vue检测数据的原理

3.1 基本知识

Vue监视数据的原理：

1、vue会监视data中所有层次的数据。

2、 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。

  • (1).对象中后追加的属性，Vue默认不做响应式处理
  • (2).如需给后添加的属性做响应式，请使用如下API：
    Vue.set(target，propertyName/index，value) 或
    vm.$set(target，propertyName/index，value)
  1. 如何监测数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做了两件事：
  • (1).调用原生对应的方法对数组进行更新。
  • (2).重新解析模板，进而更新页面。

4、在Vue修改数组中的某个元素一定要用如下方法：

  • 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  • 2.Vue.set() 或 vm.$set()

在这里插入图片描述
在这里插入图片描述

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

3.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>总结数据监视</title>
    <style>
        button {
            margin-top: 10px;
        }
    </style>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <h1>学生信息</h1>

        <button @click="addFriend">在列表首位添加一个朋友</button> <br />
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            student: {
                name: 'tom',
                age: 18,
                friends: [
                    { name: 'jerry', age: 35 },
                    { name: 'tony', age: 36 }
                ]
            }
        },
        methods: {

            addFriend() {
                this.student.friends.unshift({ name: 'jack', age: 70 })
            },

        }
    })
</script>

</html>

3.3 测试效果

在这里插入图片描述

3.4 需要掌握的前提知识

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章