vue v-for遍歷物件中的某一項的內容
阿新 • • 發佈:2018-12-26
在vue中使用物件的情況有很多,怎樣實現遍歷物件中一組重複的內容,並顯示出來呢?
左側導航的一種做法
(1)原始資料構成,在data中的return函式內部
navTo:{
"operate":[
{"name":"衣服","path":'/one'},
{"name":"文具","path":'/HelloWorld/two'},
{"name":"鞋子","path":'/HelloWorld/three'},
{"name":"皮包","path":'/HelloWorld/four'},
{"name":"家電","path":'/HelloWorld/five'},
{"name":"玩具","path":'/HelloWorld/six'}
]
}
operate是navTo中的一項內容,怎樣通過v-for訪問到operate並訪問name那一項呢?
(2)v-for訪問operate的方法
核心語句:(operate,path,index) in navTo.operate
解釋:navTo.operate 是在navTo中找到operate
operate.name是在operate中訪問name那一項
<p v-for="(operate,path,index) in navTo.operate" class="nav">
{{operate.name}}
</p>