溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們大多時候渲染表格都是key值在頁面上寫死的情況下，一個個value渲染，那我們遇到數據是鍵值對的時候該如何渲染呢？
我們查看vue的官方文檔，如下：
值域 v-for
v-for 也可以接收一個整數，此時它將重復模板數次。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
結果：
那我們就可以通過如下方法來渲染列表：
<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'},
]
}
}
}
效果如下：
可以通過更改數組長度除以的數值來實現列數的調整！
以上這篇Vue.js實現表格渲染的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
