<!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. 干货，看微信小程序后台用户数据如何演变和递增

    这几天发现附近小程序又多了好几家,其中有普通小程序和门店小程序,把它们做一个对比,门店小程序更多的像一张名片,只有基本的企业名称.地址.营业时间.电话和门店照片,和普通小程序相比显得逊色许多.楼下的水 ...

  2. ES6-11学习笔记--正则表达式的扩展

    y修饰符 u修饰符   复习以前的修饰符: i(忽略大小写) m(多行匹配) g(全局匹配)   y修饰符:粘连修饰符 const str = 'aaa_aa_a' const reg1 = /a+/ ...

  3. Z-blog csrf漏洞学习

    Z-blog csrf 环境搭建 1. 首先我在本地搭了一个z-blog. ​ 思路:csrf并不侧重于哪种功能点,只要检测不规范,就可能利用成功,所以我考虑了一下后台添加管理员的地方. 数据包构造 ...

  4. Shiro之权限管理的概念

    文章目录 前言:什么是shiro 一.什么是权限管理? 举例 二.权限管理的具体分类 1.身份认证 2.授权 总结 前言:什么是shiro Apache Shiro 是一个开源安全框架,提供身份验证. ...

  5. python版本共存与语法的注释

    python的多种版本共存 首先还是先下载python解释器除最高版本的另外两个版本 个人推荐的是 3.6.8和2.7.14 首先我电脑是win7系统 在计算机属性右键点开高级设置点击环境变量 将下载 ...

  6. 【面试普通人VS高手】Kafka的零拷贝原理?

    最近一个学员去滴滴面试,在第二面的时候遇到了这个问题: "请你简单说一下Kafka的零拷贝原理" 然后那个学员努力在大脑里检索了很久,没有回答上来. 那么今天,我们基于这个问题来看 ...

  7. 一行代码，让 VS Code 内置 PDF 阅读器变成深色模式

    使用 CSS/JS 简单实现 PDF 深色模式.

  8. 『现学现忘』Git基础 — 6、Git的操作流程

    目录 1.Git的基本操作流程 2.工作区.暂存区.版本库的区别 (1)工作区 (2)版本库 (3)暂存区 (4)通过新增文件理解三个区的关系 (5)说明 1.Git的基本操作流程 初始化一个本地版本 ...

  9. Springmvc 如何配置一个MAVEN项目，eclipse视图详解

    1,首先主页创建一个maven project项目, 2-3,创建完成会报错因为缺少WEB-INF文件右键点击选取,会自动创建web.xml文件 4 ,调试版本 因为默认创建的maven版本不支持,所 ...

  10. github ations 入门使用

    在使用之前,我们了解一下什么是 Github Actions. 在 GitHub Actions 的仓库中自动化.自定义和执行软件开发工作流程. 您可以发现.创建和共享操作以执行您喜欢的任何作业(包括 ...