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 ...
随机推荐
- 重定向（redirect）与转发（forward）的区别
重定向(redirect)与转发(forward)的区别 1.重定向时地址栏会发生改变,转发时地址栏不会发生改变 当浏览器请求资源时,服务器直接访问目标地址的URL,将URL的响应内容读取,之后再将读 ...
- HTML5摇一摇（上）—如何判断设备摇动
刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签"的小例子来谈一谈HTML5中如何调 ...
- Vue-router实现单页面应用在没有登录情况下，自动跳转到登录页面
这是我做前端一来的第一篇文章,都不知道该怎么开始了.那就直接奔主题吧.先讲讲这个功能的实现场景吧,我们小组使用vue全家桶实现了一个单页面应用,最初就考虑对登录状态做限制.比如登录后不能后退到登录页面 ...
- WPF控件大全（表格）-学习总结
Label标签 label控件:一般用户描述性文字显示. 在Label控件使用时,一般给予用户提示.用法上没有什么很特殊的,label控件的值记住:不是Text 而是 Content属性. TextB ...
- C#编写一个简易的文件管理器
编写一个简易的文件管理器,通过本次实验,练习 TreeView.ListView 和SplitContainer 控件的使用,同时熟悉 C#文件系统的操作方法以及 File 类和 Directory类 ...
- 浅谈ES6中的Class
转载地址:https://www.cnblogs.com/sghy/p/8005857.html 一.定义类(ES6的类,完全可以看做是构造函数的另一种写法) class Greet { constr ...
- macos停止MySQL服务
1.命令行中 使用 find /usr -name mysql 查找自己电脑中MySQL的安装位置 例如我查找到我电脑MySQL安装位置是 /usr/local/Cellar/mysql@5.6/5 ...
- 安装mysql ndb cluster二进制版本在linux上
Installing an NDB Cluster Binary Release on Linux (官方安装手册)手册地址:https://dev.mysql.com/doc/refman/5.7/ ...
- Sql递归查询，Sqlserver、Oracle、PG、Mysql
递归分两种:一种由父项向下级递归,另一种是由子项向上级递归.下面就这两种情况做个简单的处理. 假设有一个表treeview,包含字段 id,parentid,text 分别代表id,上级id,描述字段 ...
- 使用ABP SignalR重构消息服务（二）
使用ABP SignalR重构消息服务(二) 上篇使用ABP SignalR重构消息服务(一)主要讲的是SignalR的基础知识和前端如何使用SignalR,这段时间也是落实方案设计.这篇我主要讲解S ...