<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历对象的属性,会取出属性名和属性值 -->
<!-- 属性名在后,属性值在前 -->
<ul>
<li v-for="value,propName in user">{{propName}}={{value}}</li>
</ul>
<!-- 遍历字符串 -->
<!-- 会取出字符串的每一个字符和下标,字符在前,下标在后 -->
<ul>
<li v-for="s,index in str">{{index}}{{s}}</li>
</ul>
<!-- 遍历指定的次数怎么操作 -->
<!-- 左边是次数,右边是下标 -->
<ul>
<li v-for="(num,index) of counter">
{{num}},{{index}}
</li>
</ul>
<h1>{{msg}}</h1>
<!-- 静态列表 -->
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<!-- 动态列表 -->
<ul>
<!-- v-for要写在循环项上 -->
<li v-for="name in names">{{name}}</li>
</ul>
<!-- 用in和of效果是一样的 -->
<ul>
<!-- v-for要写在循环项上 -->
<!-- v-for="变量名,下标 in/of 变量" -->
<!-- 变量名代表每一个元素 -->
<li v-for="name,x of names">{{x}}:{{name}}</li>
</ul>
<ul>
<li v-for="vip,index in vips">
序列号:{{index}}
会员名:{{vip.username}}
id:{{vip.id}}
年龄:{{vip.age}}
</li>
</ul>
<table>
<tr>
<th>序列号</th>
<th>会员名</th>
<th>id</th>
<th>年龄</th>
<th>选择</th>
</tr>
<tr v-for="vip,index in vips">
<td>{{index}}</td>
<td>{{vip.username}}</td>
<td>{{vip.id}}</td>
<td>{{vip.age}}</td>
<td><input type="checkbox"/></td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
names : ["Jack","Rose","James"],
vips : [
{username : "Jack",id : 1,age : 20},
{username : "Rose",id : 2,age : 20},
{username : "James",id : 3,age : 20}
],
user : {
id : "111",
name : "Jack",
age : 25
},
str : "狂人日记鲁迅",
counter : 10
}
});
</script>
</body>
</html>
VUE框架使用v-for遍历指定字符串次数对象和数组------VUE框架
原创
©著作权归作者所有:来自51CTO博客作者旧约Alatus的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Vue+axios+php使用v-for遍历显示数据
阅读目录default.htmlindex.phpPromise对象中[[PromiseResult]]的
laravel php 开发语言 ios html -
Vue踩坑日记之v-for嵌套遍历时不能遍历对象中的数组
数据如图
前端 vue javascript js json