<!DOCTYPE html>
<html lang="zh">
<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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue自學(xué)：v-on遍歷數(shù)組和對(duì)象</title>
</head>
<body>
<div id="app">
<!-- v-for使用數(shù)組方式進(jìn)行遍歷，item代表值，index代表鍵 -->
<ul>
<li v-for="(item,index) in obj">{{item}}</li>
</ul>
<!-- v-for使用對(duì)象方式進(jìn)行遍歷，value代表值，item代表鍵,index代表索引序列 -->
<ul>
<li v-for="(value,item,index) in info">value={{value}} || item={{item}} || index = {{index}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
el:’#app’,
data:{
//數(shù)組寫(xiě)法 arr:[‘value’,’value’]
obj:[‘a(chǎn)’,’b’,’c’,’d’,’f’,’g’],
//對(duì)象寫(xiě)法 obj:{name:’value’,key:’value’}
info:{
name:’wo’,
height:’170cm’,
}
}
})
</script>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
收藏
