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