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>