<!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. js身份证精确认证

    function checkIdCard(idcard) { // 1 "验证通过!", 0 //身份证号码校验错误 var Errors = new Array( "1 ...

  2. 深入理解ES6之《用模块封装代码》

    什么是模块 模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码 在模块的顶部this的值是undefined 其模块不支持html风格的代码注释除非用default关键字,否则不 ...

  3. docker容器与虚拟机区别

  4. centos下 Docker-修改磁盘存储目录(实操)

    预备知识: Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金 ...

  5. Js中的三个错误语句:try、catch、throw

    Js中的三个错误语句:try.catch.throw

  6. MySQL入门学习day3随笔3

    JDBC 数据库驱动 我们的程序会通过数据库驱动和数据库打交道 JDBC Sun公司简化开发人员的操作,提供的规范 第一个JDBC项目 创建一个Java项目 导入jar包 编写测试代码 1 creat ...

  7. Codeforces Round #133 (Div. 2), A.【据图推公式】 B.【思维+简单dfs】

    Problem - 216A - Codeforces Problem - B - Codeforces A Tiling with Hexagons 题意: 给出a b c ,求里面有多少个六边形 ...

  8. Codeforces Round #704 (Div. 2), problem: (C) Maximum width还是要多学习

    Problem - C - Codeforces 看清题目要求, 最重要部分在第二段. 大佬最后给出的代码果然简单, 思路简单化, 未必非要把答案在一个大括号里全部完成, 两个指针同时跑,中间加了一堆 ...

  9. Codeforces Round #741 (Div. 2), problem: (D1) Two Hundred Twenty One (easy version), 1700

    Problem - D1 - Codeforces 题意: 给n个符号(+或-), +代表+1, -代表-1, 求最少删去几个点, 使得     题解(仅此个人理解): 1. 这题打眼一看, 肯定和奇 ...

  10. 2021.07.02 P1383 高级打字机题解(可持久化平衡树)

    2021.07.02 P1383 高级打字机题解(可持久化平衡树) 分析: 从可以不断撤销并且查询不算撤销这一骚操作可以肯定这是要咱建一棵可持久化的树(我也只会建可持久化的树,当然,还有可持久化并查集 ...