<!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>
<body>
<div id="app">
<h1>使用 v-for 指令遍历数组</h1>
<p v-for="(hobby, index) in hobbies" :key="'arr'+ index">{{'arr'+ index}}->{{index}}->{{hobby}}</p>
<h1>使用 v-for 指令遍历对象</h1>
<p v-for="(value, key) in contacts" :key="key">{{key}}->{{value}}</p>
<h1>使用 v-for 指令遍历数字</h1>
<p v-for="(num, index) in age" :key="'num'+index">{{'num'+index}}->{{index}}->{{num}}</p>
<h1>使用 v-for 指令遍历字符串</h1>
<p v-for="(char, index) in name" :key="'char'+index">{{'char'+index}}->{{index}}->{{char}}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
data: {
name: '刘逸云',
age: 6,
hobbies: ['睡觉', '吃饭', '学习'],
contacts: {
email: '[email protected]',
phone:'158715287126',
address: '郑州市高新区'
}
}
}).$mount('#app')
</script>
</body>
</html>
