内容概要
Js的几种循环方式
v-for可以循环的变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div class="app">
<!--v-for能循环的数据类型-->
<h1>v-for循环</h1>
<!--<h2>循环数组</h2>-->
<!--<p v-for="goods in goodList">{{goods}}</p>-->
<!--<h2>循环数组带索引</h2>-->
<!-- <p v-for="(good,index) in goodList">{{index}}-----{{good}}</p> <!–k为字符串内容v为字符串索引–>-->
<!--<h2>循环字符串</h2>-->
<!--<p v-for="i in name">{{i}}</p>-->
<!--<p v-for="(k,v) in name">{{k}}-----{{v}}</p> <!–k为字符串内容v为字符串索引–>-->
<!--<h2>循环对象</h2>-->
<!--<p v-for="(k,v) in info">{{k}}-----{{v}}</p> <!–k为值，v为k–>-->
<!--<p v-for="i in info">{{i}}</p> <!–i为值–>-->
</div>
</body>
<script>
let vm = new Vue({
el:'.app',
data:{
goodList:['美女','汽车',"报纸","香槟"],
name:"刘亦菲真好看我就喜欢看",
info:{tureName: 'meiren', age: 19,}
},
methods:{}
})
</script>
</html>
总结:
数组循环: i in xx i为数组中的每一个数据
数组循环带索引: k,v in xx k为数组中的每一个数据 v为索引
字符串循环 i in xx i 为字符串中的每一个数据
字符串循环带索引:k,v in xx k为字符串内容v为字符串索引
对象循环 i in xx i 为对象的每一个数据的值
对象循环带索引 k,v in xx k为对象每一个数据的值,v为对象每一个数据的键
js的循环方式
js中5中循环方式！
python都是基于迭代的循环，没有基于索引的循环
// 第一种 基于索引的循环 拿到的i 为索引
var a = [4, 5, 6, 7]
for (i = 0; i < a.length; i++) {
console.log(i)
// console.log(a[i])
}
// 第二种 js 中 in 循环 拿到的 i 为索引
var list=[4,5,6,7]
for (i in list){
console.log(i)
console.log(a[i])
}
// 第三种 js 中 es6语法 of 循环 拿到的i为值
var list = ['美女','汽车',"报纸","香槟"]
for (i of list){
console.log(i)
}
// 第四种 js数组自带方法forEach i 为 值
var list = ['美女','汽车',"报纸","香槟"]
list.forEach((i)=> {
console.log("-",i)
})
// 第五种 jquery 中的循环 index为索引，value为数组中的值
导入jquery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
var list = ['美女','汽车',"报纸","香槟"]
$.each(list,(index,value)=> {
console.log(index,"---",value)
})