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 市丸银阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue 条件渲染

· Vue 表单数据收集

· Vue学习笔记19--列表渲染

· vue(vue-js)—列表渲染(v-for)

· Vue 2x 系列之（十二）列表渲染

公告

昵称：市丸银
园龄： 5年10个月
粉丝： 7
关注： 19

+加关注

2025年3月

日

一

二

三

四

五

六

市丸银

知行合一

Vue 列表渲染

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论