Vue 第五讲（v-for 属性）

循环事件

是我来晚了！

3397人浏览 · 2021-05-02 00:08:59

是我来晚了！ · 2021-05-02 00:08:59 发布

Vue

1、循环是如何的
2、通过什么循环的
3、状态保持
4、更新视图层

上一篇文章： 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>

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

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

在这里插入图片描述
此处介绍一种循环对象（ 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>

在浏览器中打开

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

循环对象我们定义了三种，分别是数字，数组及对象
共同点是都需要使用到 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}} 表示列表中的值

若对象为一个复杂数组（数组中包含字典）

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 的值(此处是通过索引取字典里的元素)

在浏览器中打开

在这里插入图片描述

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

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>

在浏览器中打开

在这里插入图片描述

字典对象

若对象为一个字典

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 索引

在浏览器中打开

在这里插入图片描述

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>

在浏览器中打开

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

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>

在浏览器中打开

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

<!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>

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}$/, //不连续的两位字母// /^