1、传统遍历数组,且将数组内容逐一添加到页面方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 传统遍历数组显示方式 -->
<body>
<div id="list"></div>
</body>
<script>
// 按照我们以往需要遍历一个数组,并且将数组内容逐一添加到页面中
// 第一步:获取到整个盒子
// 第二步:遍历数组里面的内容
// 第三步:创建li标签
// 第四步:逐一将数组的每个元素添加到盒子里面
var arr = ['苹果', '香蕉', '桃子']
var lis = document.getElementById("list")
arr.forEach(item => {
var liment = document.createElement('li')
liment.textContent = item
lis.appendChild(liment)
})
</script>
</html>
2、使用v-for指令方式
<!DOCTYPE html>
<html>
<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></title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
li {
list-style: none;
}
</style>
<body>
<!-- v-for指令:原理是和我们之前学习for循环是一样的,只不过存在一点区别 -->
<div id='app'>
<!-- item表示的是每一个元素对象,index表示的是每个元素的索引值 -->
<li v-for="item,index in arr">{{index}}:{{ item }}</li>
<hr>
<!-- 使用v-for遍历对象方式:item表示的是每个属性值,index表示的是属性 -->
<li v-for="item,index in obj">{{index}}:{{item}}</li>
<p>obj的姓名是:{{obj.name}},年龄是:{{obj.age}}</p>
<hr>
<!-- item表示的是一个元素【那么list里面有两个元素/对象】 -->
<li v-for="item in list">{{item.name}}的年龄是{{item.age}}</li>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
arr: ['苹果', '香蕉', '桃子'],
obj: {
name: "Vue",
age: 10
},
list: [
{
name: "小明",
age: 20
},
{
name: "小美",
age: 18
}
]
}
})
</script>
</html>