1. 程式人生 > >vue v-for遍歷物件中的某一項的內容

vue v-for遍歷物件中的某一項的內容

在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>