Mr.J--Vue之v-for全解析

2023-09-10 阅读 20 评论 0

摘要：多次显示数据 {{list[0]}}{{list[1]}}{{list[2]}}{{list[3]}}{{list[4]}} 上面这一种是最不好，也是几乎没人用的一种循环方式，它就不是循环（滑稽.jpg&

多次显示数据

        <p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p>

上面这一种是最不好，也是几乎没人用的一种循环方式，它就不是循环（滑稽.jpg）

v-for

先只写Html里面的渲染，数据在后面展示

实现普通数组循环

<p v-for="item in list1">{{item}}</p><!-- 普通数组 --><p v-for="(item,i) in list1">数组数据 ： {{item}} --- 索引值: {{i}}</p>

实现对象数组循环

 <p v-for="item in list2">{{item}}</p><p v-for="item in list2">{{item.id}} --- {{item.name}}</p><p v-for="(item,i) in list2">{{item.id}} --- {{item.name}} --- {{i}}</p>

实现对象循环

<p v-for="(val,key,i) in user">{{val}} --- {{key}} --- {{i}}</p>

数字迭代

<p v-for="count in 5">这是{{count}}第次循环</p>

v-for:Key值

<div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- v-for 循环时 key 属性只能使用 number获取 string  2. 必须使用v-bind进行属性绑定，指定key的值保证数据的唯一性 --><p v-for="item in Obj" :key="item.id"><input type="checkbox">{{item.id}} ---  {{item.name}}</p>

使用key值：

vue this，数据会进行绑定

未使用key值同样开始选择的是2-pou

数据没有进行绑定，而是根据所在位置进行抉择

完整源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>[v-cloak] {display: none;}
</style>
<script src="./jquery.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./bootstrap.min.js"></script><body><div id="app" v-cloak><!-- <p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p> --><div class="col-md-4" style="border:greenyellow 2px solid;width: 200px;height:500px;margin:auto"><h3>普通数组: </h3><br><p v-for="item in list1">{{item}}</p><!-- 普通数组 --><p v-for="(item,i) in list1">数组数据 ： {{item}} --- 索引值: {{i}}</p></div><!-- 对象数组 --><div class="col-md-4" style="border:aqua 2px solid;width: 200px;height: 420px"><h3>对象数组:</h3><p v-for="item in list2">{{item}}</p><p v-for="item in list2">{{item.id}} --- {{item.name}}</p><p v-for="(item,i) in list2">{{item.id}} --- {{item.name}} --- {{i}}</p></div><br><div class="col-md-4" style="border:hotpink 2px solid;width: 200px;height: 200px"><h3>循环输出对象:</h3><!-- 循环输出对象 --><!-- 数据   键值   索引值 --><p v-for="(val,key,i) in user">{{val}} --- {{key}} --- {{i}}</p></div><div class="col-md-4" style="border:rgb(22, 197, 74) 2px solid;width: 200px;height: 200px"><!-- 注意：v-for 迭代数字，值从1开始 不是0 --><!-- in 后面  普通数组 对象数组 对象 数字 --><p v-for="count in 5">这是{{count}}第次循环</p></div><!-- key属性使用 --><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- v-for 循环时 key 属性只能使用 number获取 string  2. 必须使用v-bind进行属性绑定，指定key的值保证数据的唯一性 --><p v-for="item in Obj" :key="item.id"><input type="checkbox">{{item.id}} ---  {{item.name}}</p></div>
</body>
<script src="./vue.js"></script>
<script>var vm = new Vue({el: "#app",data: {id:'',name:'',//普通数组list1: [1, 2, 3, 4, 5, 6, 8],//对象数组list2: [{ id: 1, name: 'jack' },{ id: 2, name: 'young' },{ id: 3, name: 'jar' },{ id: 4, name: 'josn' }],//对象user: {id: 1,name: 'Tony Stark',sex: 'man'},//keyObj: [{ id: 1, name: 'pop' },{ id: 2, name: 'pou' },{ id: 3, name: 'bunk' },{ id: 4, name: 'kery' }]},methods: {add(){// this.Obj.push({id:this.id,name:this.name})this.Obj.unshift({id:this.id,name:this.name})}}})
</script></html>

原文链接：https://hbdhgg.com/2/35725.html

发表评论: