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

前往低代码交流专区

更多推荐