vuejs中怎么利用v-for指令實(shí)現(xiàn)列表渲染

vuejs中怎么利用v-for指令實(shí)現(xiàn)列表渲染，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

1.使用js的for循環(huán)去遍歷填充

2.ng的ng-repeat

今天我們使用vue.js的v-for

一、html

<div class="shop_list_box">
   <ul>
    <li><span>蚌埠</span><span>鳳陽東路</span></li>
    <li><span>蚌埠</span><span>鳳陽東路</span></li>
  </ul>
</div>

二、Json數(shù)據(jù)節(jié)點(diǎn)

 三、使用v-for綁定數(shù)據(jù)到頁面上

引用vue.js,請求數(shù)據(jù)成功之后實(shí)例化一個(gè)Vue。el是綁定到那個(gè)元素下

注意這里時(shí)一個(gè)數(shù)組里面包了一些對象---->{}或者[{},{},{}]

 GetAjaxData("js/cstore2.json", {name:"zq"}, function (dat) {
      
      var data = dat.cstore

      // console.log(data)
      
      var vm = new Vue({
        el: '#example',
        data: {
          items: data
        }
      })
    });

<div class="shop_list_box">
           <ul id="example">
             <li v-for="item of items">
               <span>{{ item.city }}</span><span>{{ item.shop }}</span>
             </li>
             
           </ul>
         </div>

到這里就ok了。

不過也可以使用template v-for

template v-for  類似于v-for

 {{item.city}}也可以使用v-text=” item.city”代替，優(yōu)點(diǎn)是數(shù)據(jù)沒有加載完時(shí)不會看到{{}}占位符

關(guān)于vuejs中怎么利用v-for指令實(shí)現(xiàn)列表渲染問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。