<!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. ros系统21讲—前六讲

    课程介绍(第一讲) linux介绍安装(第二讲) linux的基础操作(第三讲) ROS中语言c++与python介绍(第四讲) 安装ROS系统(第五讲) 第一个: sudo sh -c echo d ...

  2. 使用Dropbox搭建静态网站详细教程

    DropBox是一款非常好用的免费网络文件同步工具,是Dropbox公司运行的在线存储服务,通过云计算实现因特网上的文件同步,用户可以存储并共享文件和文件夹.今天小z和大家分享一下如何使用dropbo ...

  3. ES6-11学习笔记--异步迭代

    ES9提供异步迭代: for await of Symbol.asyncIterator   function getPromise(time) { return new Promise((resol ...

  4. mapreduce统计单词

    源代码: WordCountMapper.java: package cn.idcast.mapreduce; import org.apache.hadoop.io.LongWritable; im ...

  5. python关于变量介绍

    python变量 一.变量分为两种解释 1.随时可以变化的量 称之为变量 (变化多端嘛) 2.不会被变化的量 称之为常量 (常常不动嘛) #我们学习的python中没有真正定义的常量 #只有在绑定一个 ...

  6. 告别收费BI!如何自己动手做一个免费的可视化数据报表还支持文档在线预览？

    本人大学刚毕业目前在一家互联网公司从事产品运营工作,一季度刚过,公司需要我出一份产品运营数据报表,由于产品用户数据.订单数据等数据量太大,我希望找一款Bi产品,支持我做出一个精美的可视化报表,还可以让 ...

  7. 安卓记账本开发学习day5之版本兼容问题

    安卓5.0以上版本想要隐藏DatePicker头布局的写法比较复杂,需要一层一层隐藏 int headerId = getContext().getResources().getIdentifier( ...

  8. OpenHarmony 3.1 Beta版本关键特性解析——HAP包安装实现剖析

    ​(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点)​ 石磊 随着社会的不断发展,人们逐渐注重更加高效.舒适.便捷.有趣的生活和工作体验. OpenAtom OpenHa ...

  9. 控制Python浮点数输出位数

    技术背景 在Python的一些长效任务中,不可避免的需要向文本文件.二进制文件或者数据库中写入一些数据,或者是在屏幕上输出一些文本,此时如何控制输出数据的长度是需要我们注意的一个问题.比如对于一个二进 ...

  10. 【Azure 应用服务】Azure Function 启用 Managed Identity后， Powershell Funciton出现 ERROR: ManagedIdentityCredential authentication failed

    问题描述 编写Powershell Function,登录到China Azure并获取Azure AD User信息,但是发现遇见了 [Error] ERROR: ManagedIdentityCr ...