赞
踩
- <!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>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。