|
|
|
|
步骤 2 : index用法 步骤 3 : 纯数字遍历
首选准备一个数组
var data = [ {name:"盖伦",hp:341}, {name:"提莫",hp:225}, {name:"安妮",hp:427}, {name:"死歌",hp:893} ]; 然后在构建Vue的时候把这个数组作为参数传递进去： data: { heros:data } 最后在视图上，通过v-for 遍历这个数组。 <tr v-for="hero in heros"> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> </tr> <script src="https://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var data = [
{name:"盖伦",hp:341},
{name:"提莫",hp:225},
{name:"安妮",hp:427},
{name:"死歌",hp:893}
];
new Vue({
el: '#div1',
data: {
heros:data
}
})
</script>
通过如下方式可以获取遍历下标
<tr v-for="hero,index in heros"> <script src="https://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
width:300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>number</td>
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero,index in heros">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var data = [
{name:"盖伦",hp:341},
{name:"提莫",hp:225},
{name:"安妮",hp:427},
{name:"死歌",hp:893}
];
new Vue({
el: '#div1',
data: {
heros:data
}
})
</script>
通过如下方式可以进行纯数字遍历：
<div v-for="i in 10"> <script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-for="i in 10">
{{ i }}
</div>
</div>
<script>
new Vue({
el: '#div1'
})
</script>
<script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-for="i in 10">
{{ i }}
</div>
</div>
<script>
new Vue({
el: '#div1'
})
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2021-02-21
为什么json格式数据类型名称没有加双引号？
2 个答案
Shu_Enryu 跳转到问题位置 答案时间：2023-12-01 因为这个是一个装有javaScript对象的数组。
javaScript对象的属性名称不需要加双引号。
json对象的属性名称需要加双引号。
取决于你想创建什么形式的对象。json是javaScript的一种格式。
乐仔很威武 跳转到问题位置 答案时间：2021-03-26 key:value
key 可以不加，当然标准的好像需要加上，但是大家一般都不加，这个无所谓
value 如果是字符串肯定必须加，如果是 数字类型之类的就不用加了，数字如果加上了虽然显示是数字，本质是个字符串类型的数字
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-09-03
为什么我用html的vuejs, {{item}}总是不能显示被绑定的数据
2 个答案
ercilan 跳转到问题位置 答案时间：2020-10-30 data里应该是键值对形式的，你这就是一个纯数组，不对。应该是heros:[...]
青山再绿 跳转到问题位置 答案时间：2020-10-08 heros:[{},{}]
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-10-28
为什么是heros:data,而不是hero:data
2019-10-18
好奇 就是 如果遍历一个 对象 对象里还有个集合 怎么遍历鸭 ？
2019-04-25
vue对语法的要求
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
