vue之箭头函数
说明
当在一个方法(函数)里面再定义一个方法(函数)时，内部的方法的this指向会有问题，如下：
<body>
<div id="app">
<h1>{{l1}}</h1>
<button @click="clickFunc">点我</button>
</div>
</body>
<script>
vm = new Vue({
el:'#app',
data:{
myText: 'ab',
l1: ['a', 'ab', 'atd', 'b', 'd']
},
methods:{
clickFunc(){
this.l1 = this.l1.filter(function (item){
if(item.indexOf(this.myText) >= 0){
return true
}else{
return false
}
})
}
}
})
</script>
如图，此时点击按钮没有匹配上任何内容
解决方法一 重新定义this
第一种解决方法是，在内部函数外重新定义一下this，例如
<script>
vm = new Vue({
el:'#app',
data:{
myText: 'ab',
l1: ['a', 'ab', 'atd', 'b', 'd']
},
methods:{
clickFunc(){
let _this=this
this.l1 = this.l1.filter(function (item){
if(item.indexOf(_this.myText) >= 0){
return true
}else{
return false
}
})
}
}
})
如下图所示，筛选功能已生效
解决方法二 使用箭头函数
前头函数用于匿名函数，可以继承上一个函数的this
无参数的箭头函数
let f = function () {
console.log('123')
}
f()
// 修改为箭头函数写法
let f = () => { // 省略了function
console.log('123')
}
f()
有一个参数的箭头函数
let f = function (item) {
console.log(item)
}
f('hello world')
// 修改为箭头函数
let f = item => { // 可以省略扩号（括号也可以不省略）
console.log(item)
}
f('hello world')
有两个参数的箭头函数
let d1 = {'name': 'Hello World'}
let f = function (item, key) {
console.log(item, key)
}
f(d1)
// 使用前头函数
let f = (item, key) => { // 两个参数必须加括号
console.log(item, key)
}
f(d1)
有一个参数一个返回值的箭头函数
let f = function (item) {
return item + '!!!!'
}
res = f('hello world')
// 使用匿名函数
let f = item => item + '****' // 省略了return
res = f('hello world')
console.log(res)
vue之箭头函数的更多相关文章
- Vue ES6箭头函数使用总结
Vue ES6箭头函数使用总结 by:授客 QQ:1033553122 箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 ...
- Vue学习笔记之Vue的箭头函数
0x00 箭头函数 基本语法: ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭 ...
- vue 之 箭头函数与对象的单体模式
箭头函数 基本语法: ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需 ...
- 用箭头函数精简Vue 模块
https://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev 使用箭头函数,this指向v ...
- VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数
methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...
- 聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数？
聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览: Vue 中的 watch 对象中的回调函数不能是箭头函数. 箭头函数中的 this 指向的是函数定义时所在的 ...
- vue data不可以使用箭头函数的问题解析
这篇文章主要介绍了vue data不可以使用箭头函数问题,本文通过源码解析给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 首先需要明确,a() {}和 b: () => {} ...
- AntDesign VUE：Model组件的Button的事件this指向undefined的问题（箭头函数）
问题 一个很简单的this指向问题引起的报错: 记录下来主要是想看看这玩意到底指向哪里: 真不戳 解决方法 ES6的箭头函数,有人理解它就是没有this指向,我个人理解是它的this指向函数体的上一级 ...
- 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- javascript基础修炼（8）——指向FP世界的箭头函数
一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应 ...
随机推荐
- Floyd算法求最短路径
floyd算法用于求图中各个点到其它点的最短路径,无论其中经过多少个中间点.该算法的核心理念是基于动态规划, 不断更新最短距离,遍历所有的点. 知识基础:图的邻接矩阵表示: 如图是一个简单图,从A开始 ...
- ubuntu20安装open4.4带扩展库
0查看当前版本安装 opencv_version 已经装了3.49 再装个4.4共存 1安装依赖库 sudo add-apt-repository "deb http://security. ...
- kubctl
kubctl delete 命令:删除资源 根据yaml文件删除对应的资源,但是yaml文件并不会被删除,这样更加高效 delete 描述: 按文件名.stdin.资源和名称或按资源和标签选择器删除资 ...
- obs问题记录
1.安装obs后,可能无法使用,需要下载dll文件,我的阿里云盘中有: 2.录制时电脑没电会报错'编码器错误': 3.插上声卡后播放视频想听到声音需要在声卡上插耳机听: 4.
- matlab函数学习笔记
数值精度 显示精度由format函数控制,不影响原始数据,只控制显示精度 命令 说明 long short rat 分数 digits vpa pi的输出 命令 显示结果结果 form ...
- Lua元表应用举例：配置表格转为Lua配置表
把配置表格.xlsx数据转为Lua配置表,其实就是把表格数据用Lua写一遍,这里的实现重点就是setmetatable设置元表. 以下以表格student_info.xlsx举例,展示对应Lua配置表 ...
- 1012.Django中间件以及上下文处理器
一.中间件 中间件的引入: Django中间件(Middleware)是一个轻量级.底层的"插入"系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出. d ...
- 功能测试--APP专项
APP测试重点 APP测试与web测试的区别 APP测试常见问题 APP日志分析 APP压力稳定性测试
- 6.3dmax小场景案例
# 知识点: 1.cut剪切 --- 快捷键 alt+c 2.仅影响轴.坐标轴回到物体中心 3.Mirror镜像 4.attach附加.detach分离 5.Collapse.Weld合点 6.bev ...
- beamforming源码标记
p:各阵元的声压信号矩阵 R:接收数据的自协方差矩阵 Pcbf:交叉谱矩阵