v-for:用于展示列表数据
写法:v-for="(item,index) in xxx" :key="yyy"
可遍历:数组、对象、字符串(用的少)、指定次数(用的少)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
<!-- 遍历数组 -->
<h3>遍历数组</h3>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} - {{p.age}}
</li>
<!-- 遍历对象 -->
<h3>遍历对象</h3>
<li v-for="(value,k) in car" :key="k">
{{k}} - {{value}}
</li>
<!-- 遍历字符串(用的少) -->
<h3>遍历字符串</h3>
<li v-for="(char,index) in str" :key="index">
{{index}} - {{char}}
</li>
<!-- 遍历指定次数(用的少) -->
<h3>遍历指定次数</h3>
<li v-for="(number,index) in 5" :key="index">
{{index}} - {{number}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
persons: [
{id: '001', name: '张三', age: 18},
{id: '002', name: '李四', age: 20},
{id: '003', name: '王五', age: 19},
],
car: {
name: '奥迪',
price: '70万',
color: '白色'
},
str: 'Hello'
}
})
</script>
</html>