v-for普通循环
<div id="div1">
<ul>
<li v-for="user in users">
用户名：{{user.name}} 密码：{{user.password}}
</li>
</ul>
</div>
let vm=new Vue({
el: '#div1',
data: {
users: [
{name: 'blue', password: '123456'},
{name: 'zhangsan', password: '654321'},
{name: 'lisi', password: '111111'},
]
}
});
v-for循环带下标
<div id="div1">
<ul>
<li v-for="user,index in users">
{{index}}.用户名：{{user.name}} 密码：{{user.password}}
</li>
</ul>
</div>
let vm=new Vue({
el: '#div1',
data: {
users: [
{name: 'blue', password: '123456'},
{name: 'zhangsan', password: '654321'},
{name: 'lisi', password: '111111'},
]
}
});
v-for怪异的写法-值，键 in obj
<div id="div1">
<ul>
<li v-for="val,name in style">
{{name}}: {{val}}
</li>
</ul>
</div>
let vm=new Vue({
el: '#div1',
data: {
style: {
width: '200px',
height: '300px'
}
}
});
v-for字符串循环
data: {
str: 'sdfsfgfdgh'
}
<li v-for="s in str">
{{s}}
</li>
v-for循环数字
<li v-for="i in 50">
{{i}}
</li>
v-for循环请注意，标准写法要加:key
let vm=new Vue({
el: '#div1',
data: {
users: [
{id: 1, name: 'blue', password: '123456'},
{id: 3, name: 'zhangsan', password: '654321'},
{id: 7, name: 'lisi', password: '111111'},
]
}
});
<div id="div1">
<ul>
<li v-for="user in users" :key="user.id">
用户名：{{user.name}} 密码：{{user.password}}
</li>
</ul>
</div>