<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <h1>{{title}}</h1>

        <ul>

            <li v-for="(car, index) in cars">
　　　　　　　　　　我的汽车：{{car}}
　　　　　　　　　  <button @click="add(car)">+</button>

                <button @click='del(index)'>删除</button>

            </li>

        </ul>

    </div>

    <script>

        console.dir(Vue);

        const vm = new Vue({

            el: '#app',

            data: {

                cars: [

                    { name: '奥迪',num:0},

                    { name: '宝马',num:1},

                    { name: '奔驰',num:2},

                ]

            },

            methods:{

                add(car){

                    car.num++;

                },

                del(i){

                    this.cars.splice(i,1);

                }

            }

        });

    </script>

</body>

</html>

2.0 vue循环和方法调用的更多相关文章

  1. Vue组件传值方法调用

    1.子组件改变父组件的值 <father  label="云盘快照" name="name2"> <son :props='rows'   @ ...

  2. vue定义全局方法 调用其他组件的方法

    官网的写法  vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例  如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...

  3. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

  4. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  5. Vue源码之----为什么Vue中Array的pop，push等方法可以reactive，而Array[0]='a'这样的方法不会reactive?

    这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...

  6. vue 2.0 vue.set的使用方法

    这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据. 首先在列表中动态新增一条数据: <!DOCTYPE html><html><head lang=&quo ...

  7. vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  8. vue中methods一个方法调用另外一个方法

    转自http://blog.csdn.net/zhangjing1019/article/details/77942923 vue在同一个组件内: methods中的一个方法调用methods中的另外 ...

  9. vue methods 方法中 方法 调用 另一个方法。

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法. 可以在调用的时候 this.$options.methods.test(); this.$options.met ...

随机推荐

  1. 语言算子&模糊推理

    一.语言算子 语言算子分为三类: ①语气算子 ②模糊化算子 ③判定化算子 (1)语气算子 "集中化算子":--"很"."极"."非 ...

  2. 《基于.NET Core构建微服务》系列文章(更新至第6篇，最新第7篇，已发布主页候选区)

    原文:Building Microservices On .NET Core – Part 1 The Plan 时间:2019年1月14日 作者:Wojciech Suwała, Head Arch ...

  3. 对Flex布局的总结与思考

    阅读本文之前最好对flex布局有基本了解,可以通过"参考资料"中列举的资源来学习. flex布局规范的设计目标 一维布局模型(one-dimensional layout mode ...

  4. 【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历

    话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发. ...

  5. 前端网络安全——Cookies

    一.Cookies特性 1.前端数据存储 2.后端通过http头设置 3.请求时通过http头传给后端 4.前端可读写 5.遵守同源策略 二.Cookies内容 1.域名 2.有效期,删除cookie ...

  6. 顺序、随机IO和Java多种读写文件性能对比

    概述 对于磁盘的读写分为两种模式,顺序IO和随机IO. 随机IO存在一个寻址的过程,所以效率比较低.而顺序IO,相当于有一个物理索引,在读取的时候不需要寻找地址,效率很高. 基本流程 总体结构 我们编 ...

  7. PC端免费高效的同声翻译

    疫情期间上网课,对于英语听力较差或者需要观看英文视频,但实际上并没有双语字幕的这种情况下需要找一个实时的翻译工具.虽然说手机上此类软件比较多,但电脑上没有特别合适的应用可以做为一个免费实时翻译.哪怕是 ...

  8. EMS查看单个邮箱的已用空间

    Exchange查询单个邮箱用户使用状态. 查看用户"wsj"的邮箱使用状态 键入以下命令: Get-MailboxStatistics wsj | FL DiplayName,T ...

  9. 《头号玩家》AI电影调研报告（三）

    [AR市场正在迅猛增长] 据<工业增强现实现状2017>报告中所述,AR不再只是值得期待的新兴技术.2018年,投资此类技术已成为很多组织机构的关键战略,尤其是对于涉及复杂的制造和运营流程 ...

  10. Servlet实现登录注册

    1.注册页面register.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...