ES6箭头函数--不能在computed用

最新推荐文章于 2023-12-07 16:11:33 发布

AsaZyf

最新推荐文章于 2023-12-07 16:11:33 发布

阅读量831

点赞数

分类专栏： Vue项目 Vue js 文章标签： ES6 箭头函数 Vue computed ES6箭头函数

本文链接：https://blog.csdn.net/AsaZyf/article/details/85245426

版权

Vue 同时被 3 个专栏收录

50 篇文章 1 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

Vue项目

11 篇文章 0 订阅

订阅专栏

箭头函数里面的this是根据上下文的,在computed里用箭头函数，由于找不到对应的内容，this会指向window，数据无法出现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>计算缓存</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{name}}</p>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
				   firstName:"Zheng",
				   lastName:"yifeng"
				},
				// 计算属性不能用箭头函数,箭头函数的this会指向window
				computed:{
					name(){
						return this.firstName+this.lastName
					}
					//this => window
					// name:()=>console.log(this)					
        }
			})
		</script>
	</body>
</html>