<!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. 算法 | 串匹配算法之KMP算法及其优化

    主串 s:A B D A B C A B C 子串 t:  A B C A B 问题:在主串 s 中是否存在一段 t 的子串呢? 形如上述问题,就是串匹配类问题.[串匹配--百度百科] 串匹配问题是一 ...

  2. 2022首场MASA技术团队黑客松赛事大赛完美落幕！精彩集锦

    Masa技术团队在2021年创立,这一年我们团队发布了我们第一个产品,Masa Blazor.登上了.NET Conf China,我们承诺,开源我们的产品,为开源社区增砖加瓦,一路上收获技术社区文章 ...

  3. 常用 adb 命令总结

    1. 显示当前运行的全部模拟器:    adb devices    2.  安装应用程序:      adb install -r 应用程序.apk    3.  获取模拟器中的文件:      a ...

  4. APK安装流程概述

    pre { background: none left top repeat scroll rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 1); ...

  5. css使Img图片居中显示

    <div class="flex-center listing-img"> <img v-if="item.imgUrl" v-bind:sr ...

  6. Ubuntu16.04 安装和卸载MySQL数据库

    Ubuntu16.04 安装和卸载MySQL数据库 1 安装 安装非常简单,只需要三个命令 1.1 安装服务端 sudo apt-get install mysql-server 在这一步过程中会有提 ...

  7. python---选择排序的实现

    选择排序 思想 ​ 一趟遍历记录最小的数, 放到第一个位置 ​ 再一趟遍历记录剩余列表中最小的数, 继续放置 关键点: ​ 无序区: 第i趟, 无序区为 i~n-1 ​ 最小数的位置 import r ...

  8. Ubuntu16更换flatabulous主题

    Ubuntu16更换flatabulous主题 安装unity-tweak-tool sudo apt-get install unity-tweak-tool 安装flatabulous主题 sud ...

  9. 四、初识Java

    一.Java三大版本 JavaSE:标准版(桌面程序,控制台开发......) JavaME:嵌入式开发(手机,小家电......)[了解就行] JavaEE:E企业级开发(Web端,服务器开发... ...

  10. 安卓记账本开发学习day9之依赖导入失败

    根据上一篇文章导入依赖,在一些旧版本的AS上能正常完成,但是我下载最新的AS以后无法正常导入 同步的时候控制台报 Build file 'C:\CS\AndroidStudioProjects\tal ...