v-for: 循环遍历
1、遍历数组
2、遍历对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<!--遍历数组-->
<li v-for="(item,index) in items">
{{item.text}} -- {{index}}
</li>
</ol>
----------------------------------------
<!--遍历对象-->
<ul>
<li v-for="(value,key,index) in obj">
{{value}} -- {{key}} -- {{index}}
</li>
</ul>
<button v-on:click="appendItem">追加</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
items: [
{text: 'SpringMVC'},
{text: 'Spring'},
{text: 'Mybatis'}
],
obj: {
"name": "zhangsan",
"age": 12,
"sex": "男"
}
},
methods: {
appendItem: function() {
app.items.push({text: 'append new item'})
}
}
});
</script>
</html>