Vue.js實(shí)現(xiàn)表格渲染的方法

更新時(shí)間：2018年09月07日 09:47:04 作者：臨溪

今天小編就為大家分享一篇對(duì)Vue.js實(shí)現(xiàn)表格渲染的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我們大多時(shí)候渲染表格都是key值在頁(yè)面上寫(xiě)死的情況下，一個(gè)個(gè)value渲染，那我們遇到數(shù)據(jù)是鍵值對(duì)的時(shí)候該如何渲染呢？

我們查看vue的官方文檔，如下：

值域 v-for

v-for 也可以接收一個(gè)整數(shù)，此時(shí)它將重復(fù)模板數(shù)次。

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

結(jié)果：

那我們就可以通過(guò)如下方法來(lái)渲染列表：

<table class="table table-bordered">
  <tbody>
  <tr v-for="n in items.length/2">
   <td>{{items[2*n].user}}</td>
   <td>{{items[2*n].msg}}</td>
   <td>{{items[2*n+1].user}}</td>
   <td>{{items[2*n+1].msg}}</td>
  </tr>
  </tbody>
 </table>

export default {
  data() {
   return{
    items: [
     {user:'A',msg:'1'},
     {user:'B',msg:'2'},
     {user:'C',msg:'3'},
     {user:'D',msg:'4'},
     {user:'E',msg:'5'},
     {user:'F',msg:'6'},
    ]
   }
  }
 }

效果如下：

可以通過(guò)更改數(shù)組長(zhǎng)度除以的數(shù)值來(lái)實(shí)現(xiàn)列數(shù)的調(diào)整！

以上這篇Vue.js實(shí)現(xiàn)表格渲染的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue?打包優(yōu)化之externals抽離公共的第三方庫(kù)詳解
這篇文章主要為大家介紹了Vue?打包優(yōu)化之externals抽離公共的第三方庫(kù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-06-06
vue給對(duì)象添加屬性沒(méi)有響應(yīng)式的問(wèn)題及解決
這篇文章主要介紹了vue給對(duì)象添加屬性沒(méi)有響應(yīng)式的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-09-09
詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue中組件的3種使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue中組件的3種使用方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue項(xiàng)目中?jsconfig.json概念及使用步驟
這篇文章主要介紹了vue項(xiàng)目中?jsconfig.json是什么,本文僅僅簡(jiǎn)單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下
2022-07-07
Vue3計(jì)算屬性是如何實(shí)現(xiàn)的
這篇文章主要介紹了Vue3計(jì)算屬性是如何實(shí)現(xiàn)的，對(duì)于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，我們都應(yīng)該使用計(jì)算屬性，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下
2022-08-08
基于Vue3實(shí)現(xiàn)日歷組件的示例代碼
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實(shí)現(xiàn)簡(jiǎn)單的日歷控件，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue強(qiáng)制刷新組件的三種方法
在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見(jiàn)的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧
2024-04-04