Vue v-for使用 vue中循环输出数据
作者： thtomatic 分类： Vue 评论: [ 0 ] 条 浏览: [ 759 ] 次
v-for的使用:
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js v-for的使用 </title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<table border="1">
<tr>
<th>编号</th>
<th>标题</th>
<th>出品方</th>
</tr>
<tbody>
<tr v-for="v in list"><!--写成 v of list 效果是一样的-->
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{title}}</td>
</tr>
</tbody>
</table>
<hr>
<table border="1">
<tr>
<th>序号</th>
<th>编号</th>
<th>标题</th>
<th>出品方</th>
</tr>
<tbody>
<tr v-for="(v,k) in list"><!--写成 (v,k) of list 效果是一样的-->
<td>{{k}}</td>
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{title}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
//element
el:'#ask',
data:{
title:'简单记录',
list:[
{id:11,name:'vue学习记录'},
{id:22,name:'vue学习笔记'}
]
}
});
</script>
</body>
</html>
效果:
以下为全部代码：
版权所有：《thtomatic》 => 《Vue v-for使用 vue中循环输出数据》
本文地址：https://ask.mykeji.net/Vue/239.html
除非注明，文章均为 《简单记录》 原创，欢迎转载！转载请注明本文地址，谢谢。
发表评论：