Vue.js實現(xiàn)表格渲染的方法
更新時間：2018年09月07日 09:47:04 作者：臨溪
今天小編就為大家分享一篇對Vue.js實現(xiàn)表格渲染的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我們大多時候渲染表格都是key值在頁面上寫死的情況下，一個個value渲染，那我們遇到數(shù)據(jù)是鍵值對的時候該如何渲染呢？
我們查看vue的官方文檔，如下：
值域 v-for
v-for 也可以接收一個整數(shù)，此時它將重復模板數(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使用recorder.js實現(xiàn)錄音功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
vue項目如何實現(xiàn)ip和localhost同時訪問
這篇文章主要介紹了vue項目如何實現(xiàn)ip和localhost同時訪問，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3的setup的使用和原理解析,通過本文我們學習了?setup?函數(shù)執(zhí)行的過程及?Vue?是如何處理捕獲?setup?的返回結(jié)果的，需要的朋友可以參考下2022-09-09
vue?iview?導航高亮動態(tài)設(shè)置方式
這篇文章主要介紹了vue?iview?導航高亮動態(tài)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
看到好多開源項目都升級了vue3,下面這篇文章主要給大家介紹了關(guān)于Vue2項目升級到Vue3的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue實現(xiàn)父子組件傳值其實不難問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要和大家一起學習vue.js的計算屬性，分享一些計算屬性練習代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue組件之間通信方式,結(jié)合實例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細介紹了vue+moment實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
今天小編就為大家分享一篇vue 組件的封裝之基于axios的ajax請求方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08