詳解vuejs之v-for列表渲染

更新時間：2017年06月22日 17:09:40 作者：若強(qiáng)

這篇文章主要介紹了詳解vuejs之v-for列表渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的web界面的庫。重點集中在MVVM模式的ViewModel層，因此非常容易與其它庫或已有項目整合

Vue.js 的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與DOM保持同步非常簡單

如下列表展示，當(dāng)我們從后端接口或者json文件使用ajax獲取數(shù)據(jù)之后現(xiàn)實到頁面，我們有n中方式去把數(shù)據(jù)渲染到頁面

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é)點

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

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

注意這里時一個數(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)點是數(shù)據(jù)沒有加載完時不會看到{{}}占位符

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

el-date-picker時間清空值為null處理方案
本文介紹關(guān)于Vue.js項目中時間選擇器組件的問題,當(dāng)選擇后清空導(dǎo)致值變?yōu)閚ull,進(jìn)而引發(fā)后臺接口報錯,通過監(jiān)聽`overallForm.time`的值并設(shè)置為空數(shù)組,成功解決此問題,確保了數(shù)據(jù)正確性,同時,建議避免直接監(jiān)聽整個對象以優(yōu)化性能,感興趣的朋友一起看看吧
2024-08-08
vue3中的數(shù)據(jù)劫持的最新實現(xiàn)方案的proxy示例詳解
Vue3中使用Proxy實現(xiàn)數(shù)據(jù)劫持,解決了Vue2中數(shù)組和對象劫持的遺留問題,Proxy可以修改某些操作的默認(rèn)行為,通過get和set方法實現(xiàn)數(shù)據(jù)的劫持和保護(hù)機(jī)制,感興趣的朋友跟隨小編一起看看吧
2024-11-11
Vue使用百度地圖實現(xiàn)城市定位
這篇文章主要為大家詳細(xì)介紹了Vue使用百度地圖實現(xiàn)城市定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用)
這篇文章主要介紹了Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue自定義指令實現(xiàn)懶加載的優(yōu)化指南
這篇文章主要為大家詳細(xì)介紹了vue如何通過自定義指令實現(xiàn)懶加載并進(jìn)行相關(guān)優(yōu)化,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-07-07
在Vue3項目中使用如何echarts問題
這篇文章主要介紹了在Vue3項目中使用如何echarts問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
uniapp微信小程序WebApi_openid、phone接口獲取代碼詳解
本文主要記錄了微信小程序接口調(diào)用的過程,首先查看uniapp文檔和微信API文檔,獲取openid和phone,然后通過uniapp實現(xiàn)獲取openid和電話號碼,但遇到了合法域名屏蔽的問題,最后通過將微信訪問遷移到后臺解決,需要的朋友可以參考下
2024-10-10
vue3中使用logicFlow的方法代碼示例
在Vue3環(huán)境下,使用LogicFlow可實現(xiàn)流程圖的繪制,詳細(xì)步驟包括引入LogicFlow庫,注冊節(jié)點與邊,設(shè)置主題和渲染數(shù)據(jù),還包括使用Map和Menu進(jìn)行功能擴(kuò)展和右鍵編輯,以及通過事件監(jiān)聽實現(xiàn)交互,
2024-10-10
vue3+elementUI如何動態(tài)修改Loading中提示文字
這篇文章主要介紹了vue3+elementUI如何動態(tài)修改Loading中提示文字的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-05-05
使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
我們知道省市區(qū)縣都有名稱和對應(yīng)的數(shù)字唯一編號，使用編號可以更方便查詢以及程序處理，我們今天來了解一下使用vue2來實現(xiàn)常見的省市區(qū)下拉聯(lián)動選擇效果,需要的朋友可以參考下
2018-11-11