<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index)in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
-->
<body>
<div id="app" >
<ul>
<li v-for="(item,index) in campus">{{index+1}}{{item}}</li>
</ul>
<button @click="add">添加菜品</button>
<button @click="remove">移除菜品</button>
<h2 v-for="item in food">{{item.name}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
campus:["一高","二高","三高"],
food:[
{name:"蛋炒饭"},
{name:"麻婆豆腐"}
]
},
methods:{
add:function(){
this.food.push({name:"宫保鸡丁"})
},
remove:function(){
this.food.shift()//移除最左边的
}
}
})
</script>
</body>
</html>?