Vue 列表渲染

一、基础

1、v-for用来展示列表数据

2、语法 v-for="(value, index) in xx" :key="唯一标识"

3、可遍历：数组、对象、字符串

注意：先是值，再是索引

注意:key=""，key等于的值是唯一标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-基础</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h2>人员信息</h2>
        <ul>
            <li v-for="(p, index) in personArr" ::key="p.id">
                {{p.name}}-{{p.age}}--{{index}}
            </li>
        </ul>
        <h2>遍历对象</h2>
        <ul>
            <li v-for="(value, key, index) in personObj">
                {{index}}-{{key}}-{{value}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#container",
            data:{
                // 遍历数组
                personArr:[
                    {id:"01", name:"张三", age:"40"},
                    {id:"02", name:"李四", age:"41"},
                    {id:"03", name:"王五", age:"42"},
                ],
                //遍历对象
                personObj:{
                    name:"王二麻子",
                    age:40,
                    sex:"男"
                }
            }
        })
    </script>
</body>
</html>

 二、key

:key="xxx"，xxx为唯一值，否则会影响效率和出错(只展示模式除外)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表添加数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h2>人员信息</h2>
        <button @click="addData">添加数据</button>
        <ul>
            <li v-for="p in personArr" ::key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#container",
            data:{
                // 遍历数组
                personArr:[
                    {id:"01", name:"张三", age:"40"},
                    {id:"02", name:"李四", age:"41"},
                    {id:"03", name:"王五", age:"42"},
                ],
                person:{id:"04", name:"李二", age:"22"}
            },
            methods: {
                addData(){
                    this.personArr.unshift(this.person)
                }
            },
        })
    </script>
</body>
</html>

三、过滤列表

借助计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表添加数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h2>人员信息搜索</h2>
        <input type="text" v-model="keyWords">
        <ul>
            <li v-for="p in newPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#container",
            data:{
                // 遍历数组
                personArr:[
                    {id:"01", name:"马冬梅", age:"40"},
                    {id:"02", name:"周冬雨", age:"41"},
                    {id:"03", name:"周杰伦", age:"42"},
                    {id:"04", name:"邓伦", age:"42"},
                ],
                keyWords:"",
            },
            computed:{
                newPersons(){
                    return this.personArr.filter((p)=>{
                        return p.name.indexOf(this.keyWords) !== -1
                    })
                }
            },
        })
    
    </script>
</body>
</html>

 四、列表排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表排序</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <input type="text" placeholder="请输入姓名" v-model="keyWord">  
        <button @click="ascOrder">年龄升序</button>
        <button @click="descOrder">年龄降序</button>
        <button @click="noChange">顺序不变</button>
        <br>
        <ul>
            <li v-for="p in filterPerson" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                sortVal:0,
                keyWord:"",
                personArr:[
                    {id:"001", name:"马冬梅", age:40},
                    {id:"002", name:"周冬雨", age:30},
                    {id:"003", name:"周杰伦", age:35},
                    {id:"004", name:"温兆伦", age:42}
                ]
            },
            computed:{
                filterPerson(){
                    // 根据姓名筛选
                    let arr = this.personArr.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })

                    if (this.sortVal) {
                        // 根据年龄排序
                        arr.sort((p1, p2) => {
                        return this.sortVal===1? p1.age - p2.age : p2.age - p1.age 
                    })
                    }
                    return arr
                }
            },
            methods: {
                noChange(){
                    return this.sortVal = 0
                },
                ascOrder(){
                    return this.sortVal = 1
                },
                descOrder(){
                    return this.sortVal = 2
                }
            },        
        })
    </script>
</body>
</html>

 

posted @ 2024-12-30 21:06  市丸银  阅读(20)  评论(0)    收藏  举报