Vue.js實現(xiàn)表格渲染的方法
更新時間：2018年09月07日 09:47:04 作者：臨溪
今天小編就為大家分享一篇對Vue.js實現(xiàn)表格渲染的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我們大多時候渲染表格都是key值在頁面上寫死的情況下，一個個value渲染，那我們遇到數(shù)據(jù)是鍵值對的時候該如何渲染呢？
我們查看vue的官方文檔，如下：
值域 v-for
v-for 也可以接收一個整數(shù)，此時它將重復(fù)模板數(shù)次。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
結(jié)果：
那我們就可以通過如下方法來渲染列表：
<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'},
]
}
}
}
效果如下：
可以通過更改數(shù)組長度除以的數(shù)值來實現(xiàn)列數(shù)的調(diào)整！
以上這篇Vue.js實現(xiàn)表格渲染的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?打包優(yōu)化之externals抽離公共的第三方庫詳解
這篇文章主要為大家介紹了Vue?打包優(yōu)化之externals抽離公共的第三方庫詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-06-06
這篇文章主要介紹了vue給對象添加屬性沒有響應(yīng)式的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要給大家介紹了關(guān)于vue中組件的3種使用方式，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue-router之實現(xiàn)導(dǎo)航切換過渡動畫效果
今天小編就為大家分享一篇vue-router之實現(xiàn)導(dǎo)航切換過渡動畫效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue項目中?jsconfig.json是什么,本文僅僅簡單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue3計算屬性是如何實現(xiàn)的，對于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，我們都應(yīng)該使用計算屬性，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-08-08
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實現(xiàn)簡單的日歷控件，文中通過示例代碼講解詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧2024-04-04