devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue 第五讲（v-for 属性）_v-for循环三次

作者：不正经 | 2024-04-07 15:09:54

赞

踩

v-for循环三次

Vue


上一篇文章： Vue 第一讲

1、循环是如何的

先写一个视图标签（p）

<!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>Document</title>
</head>
<body>
    <div>
        <p>这是第1个标签</p>
    </div>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

在浏览器中打开，我们就可以看见那一个标签，如果我们想在代码简单的情况下，写出符合某种规律的大量相同标签，那么我们就可以适当利用这个 v-for 属性

  • 此处我们规定这种规则为： 这是第 i 个标签，其中 i 为变量，也称为循环参数
  • 特别注意：使用 v-for 方法的标签需要包含在 Vue 定义的元素盒子里面，例如此处的标签（p）是包含在盒子（div）中，而盒子（div）通过 ID 属性与新创建的 Vue 对象绑定
  • 特别强调：此处仍然是使用 Vue 的方法，需要外部引入（vue）文件
  • v-for 语法：变量 in （数组，数字，对象…）

此处介绍二种循环对象（数组和数字）

<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <p v-for="i in 3">这是用数字遍历的第{{i}}个标签</p>
        <br>
        <p v-for="m in [1,2,3]">这是用数组遍历的第{{m}}个标签</p>
    </div>
    <script>
        new Vue({
            el:"#susu",
            data:{},
            methods:{},
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在浏览器中打开，我们可以发现有着相同规律的标签

在这里插入图片描述
此处介绍一种循环对象（ Vue 对象）

<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <p v-for="i in list">这是用 Vue 对象遍历的第{{i}}个标签</p>
    </div>
    <script>
        new Vue({
            el:"#susu",
            data:{
                list:[1,2,3,4,5],
            },
            methods:{},
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在浏览器中打开

在这里插入图片描述
特别强调

  • 循环对象我们定义了三种，分别是数字，数组及对象
  • 共同点是都需要使用到 v-for 方法才能循环标签，而要使用此方法，就必须引入（vue.js）文件且此标签必须包含在与 Vue 对象绑定的盒子（父类对象）里面
  • 不同点是使用数字和数组对象的时候，不需要在 Vue 对象的（data）中定义变量

2、通过什么循环的

数组对象

  • 若对象为一个简单数组
list:[1,2,3,4,5]
# 在对象 Vue 的配置项 data 中定义的变量 list 是一个简单列表

<p v-for="i in list">这是用 Vue 对象遍历的第{{i}}个标签</p>
# 将渲染出 5 个标签
# {{i}} 表示列表中的值

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 若对象为一个复杂数组（数组中包含字典）
list:[{id:1,name:"xiaosu"},{id:2,name:"xiaoke"},{id:3,name:"xiaozu"}]
# 在对象 Vue 的配置项 data 中定义的变量 list 是一个包含三个字典的复杂列表

<p v-for="i in list">这是用 Vue 数组对象第{{i.id}}个字典的名字：{{i.name}}</p>
# 将渲染出三个标签
# {{i.id}} {{i.name}} 分别表示列表中字典 id name 的值(此处是通过索引取字典里的元素)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 在浏览器中打开

在这里插入图片描述

数组对象（包含字典）与表格的结合

  • 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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <table border="1" style="background-color: aquamarine;">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>sex</th>
            </tr>
            <tr v-for="i in list">
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>{{i.sex}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#susu",
            data:{
                list:[{id:1,name:"xiaohan",sex:"man"},{id:2,name:"xiaoke",sex:"woman"}]
            },
            methods:{},
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 在浏览器中打开

在这里插入图片描述

字典对象

  • 若对象为一个字典
dict:{id:1,name:"susu",sex:"man",age:19}
# 在对象 Vue 的配置项 data 中定义的变量 dict 是一个字典

<p v-for="a,b,c in dict">Vue 字典对象索引为：{{c}}&nbsp&nbspkey 为：{{b}}&nbsp&nbspvalue 为：{{a}}</p>
# 将渲染出四个标签
# a b c 分别表示字典里面的value key 索引

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 在浏览器中打开

在这里插入图片描述

3、状态保持

简单排序（通过字符串的长度）

  • 此处通过 v-for 方法将标签（div）循环了三次
  • 并通过列表对象将数据传递给视图层面
  • 然后定义函数来对列表进行排序，从而进行了视图层面的排序
<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <div v-for="book in books" v-bind:key="book">
            <span>{{book}}</span>
            <input type="text" v-bind:placeholder="book">
        </div>
        <button @click="ChangeBooks">点击排序</button>
    </div>
    <script>
        new Vue({
            el:"#susu",
            data:{
                books:["Python","Java","C"]
            },
            methods:{
                ChangeBooks(){
                    this.books.sort()
                }
            }
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 在浏览器中打开

在这里插入图片描述
随机排序（之后补充）

4、更新视图层

初始化视图

<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <table border="1" style="width: 400px;height: 200px;">
            <tr>
                <th style="background-color: chartreuse;">id</th>
                <th style="background-color: chocolate;">name</th>
                <th style="background-color: darksalmon;">age</th>
            </tr>
            <tr v-for="i in dict">
                <td style="text-align: center;background-color: cornflowerblue;">{{i.id}}</td>
                <td style="text-align: center;background-color: darkblue;">{{i.name}}</td>
                <td style="text-align: center;background-color: darkorchid;">{{i.age}}</td>
            </tr>
        </table>     
    </div>
    
    <script>
        new  Vue({
            el:"#susu",
            data:{
                dict:[{id:1,name:"xiaoke",age:16},{id:2,name:"xiaohan",age:19}]
            }
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

在浏览器中打开

在这里插入图片描述
进行数据层面的处理从而对视图造成影响

<!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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <table border="1" style="width: 400px;height: 200px;">
            <tr>
                <th style="background-color: chartreuse;">id</th>
                <th style="background-color: chocolate;">name</th>
                <th style="background-color: darksalmon;">age</th>
            </tr>
            <tr v-for="i in dict">
                <td style="text-align: center;background-color: cornflowerblue;">{{i.id}}</td>
                <td style="text-align: center;background-color: darkblue;">{{i.name}}</td>
                <td style="text-align: center;background-color: darkorchid;">{{i.age}}</td>
            </tr>
        </table>    
        <button @click="Change1">改变起始第一个元素</button> 
        <button @click="Change2">从表格头部添加元素</button> 
        <button @click="Change3">从表格尾部添加元素</button> 
        <button @click="Change4">从表格头部开始删除元素</button>
        <button @click="Change5">从表格尾部开始删除元素</button> 
        <button @click="Change6">改变起始三个元素</button> 
    </div>
    
    <script>
        new  Vue({
            el:"#susu",
            data:{
                dict:[{id:1,name:"xiaoke",age:16},{id:2,name:"xiaohan",age:19}]
            },
            methods:{
                Change1:function(){
                    // 更改数组的第一个字典项
                    Vue.set(this.dict,0,{id:1,name:'xiaoyue',age:17})
                },
                Change2:function(){
                    // 往数组的头部添加元素
                    this.dict.unshift({id:0,name:'xiaoyueyeu',age:177})
                },
                Change3:function(){
                    // 往数组的尾部添加元素
                    this.dict.push({id:3,name:"xiaoxiao",age:11})
                },
                Change4:function(){
                    // 从数组的头部开始删除元素
                    this.dict.shift()
                },
                Change5:function(){
                    // 从数组的尾部开始删除元素
                    this.dict.pop()
                },
                Change6:function(){
                    // 从数组的起始位置起选中几个元素并且改变它们
                    this.dict.splice(0,3,{id:100,name:"susu",age:199})
                }           
                }
            })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/379216
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号