2.0 vue循环和方法调用
<!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循环和方法调用的更多相关文章
- Vue组件传值方法调用
1.子组件改变父组件的值 <father label="云盘快照" name="name2"> <son :props='rows' @ ...
- vue定义全局方法 调用其他组件的方法
官网的写法 vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例 如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Vue源码之----为什么Vue中Array的pop，push等方法可以reactive，而Array[0]='a'这样的方法不会reactive?
这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...
- vue 2.0 vue.set的使用方法
这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据. 首先在列表中动态新增一条数据: <!DOCTYPE html><html><head lang=&quo ...
- vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- vue中methods一个方法调用另外一个方法
转自http://blog.csdn.net/zhangjing1019/article/details/77942923 vue在同一个组件内: methods中的一个方法调用methods中的另外 ...
- vue methods 方法中 方法 调用 另一个方法。
vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法. 可以在调用的时候 this.$options.methods.test(); this.$options.met ...
随机推荐
- ARM指令集详解--汇编
1. 汇编 1.1. 通用寄存器 通用寄存器 37个寄存器,31个通用寄存器,6个状态寄存器,R13堆栈指针sp,R14返回指针,R15为PC指针, cpsr_c代表的是这32位中的 ...
- 自动驾驶运动规划-Dubins曲线
1.Simple Car模型 如下图所示,Simple Car模型是一个表达车辆运动的简易模型.Simple Car模型将车辆看做平面上的刚体运动,刚体的原点位于车辆后轮的中心:x轴沿着车辆主轴方向, ...
- （stm32f103学习总结）—stm32 PMW输出实验
一.PWM简介 PWM是 Pulse Width Modulation 的缩写,中文意思就是脉冲宽度调 制,简称脉宽调制.它是利用微处理器的数字输出来对模拟电路进行控 制的一种非常有效的技术,其控制简 ...
- STM32 标准库
CMSIS 标准及库层次关系 因为基于Cortex 系列芯片采用的内核都是相同的,区别主要为核外的片上外设的差异,这些差异却导致软件在同内核,不同外设的芯片上移植困难.为了解决不同的芯片厂商生产的Co ...
- 给大家补充一个结构体的例子：下面TwoNumber就是一个形式上的结构体
给大家补充一个结构体的例子:下面TwoNumber就是一个形式上的结构体: class TwoNumber { int num1; int num2; } public class T ...
- CCF201409-3 字符串匹配
问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写和小写看作不同的字符:当选项关闭时,表示同一个字母的大写和小写 ...
- github账号&文章选题
----------------------------------------------------------- https://github.com/yanpanjiao github ...
- apache开启图片缓存压缩
①-浏览器缓存图片信息 开启Apache的expires模块,重启Apache 2.在虚拟主机的配置文件里面,增加对图片信息缓存的配置,重启Apache 3.在网站目录里面填写测试代码 4.测试效果 ...
- linux磁盘分区fdisk命令操作（实践）
写这篇的目的,还是要把整个过程完整的记录下来,特别是小细节的地方,通常很多情况是一知半解,平时不实践操作只凭看是没有用的,所以做这个行业就是要多动手,多学习,多思考慢慢你的思路也会打开.练就自己的学习 ...
- Leetcode78/90/491之回溯中的子集问题
回溯之子集问题 子集问题和组合问题特别像 Leetcode78-子集 给你一个整数数组 nums ,数组中的元素 互不相同 .返回该数组所有可能的子集(幂集) 解集 不能 包含重复的子集.你可以按 任 ...