天天看点
返回

8. Vue methods和computed中不能使用箭头函数Vue methods和computed中不能使用箭头函数

Vue methods和computed中不能使用箭头函数

  • 概述

    在 Vue 的

    methods

     和

    computed

     中不能使用箭头函数，箭头函数中的

    this

     会指向

    windows

     而非 Vue 的实例。

  • 示例 

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue methods和computed中不能使用箭头函数</title>
</head>
<body>
	<div id="app">
		<h2>使用箭头函数</h2>
		<button @click="method_1">使用箭头函数回调</button>
		<p>name: {{ computed_1 }}</p>
		<h2>不使用箭头函数</h2>
		<button @click="method_2">使用箭头函数回调</button>
		<p>name: {{ computed_2 }}</p>
	</div>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		app = new Vue({
			el: '#app',
			data: {
				name: 'data中的name变量'
			},
			methods: {
				method_1: () => {
					this.name = 'method_1函数设置的属性'
					console.log('method_1:'+this)  // this 指向的是windows
				},
				method_2() {
					this.name = 'method_2函数设置的属性'
					console.log('method_2:'+this)  // this 指向的是Vue实例
				}
			},
			computed: {
				computed_1: () => {
					console.log('computed_1:'+this)  // this 指向的是windows
					return this.name
				},
				computed_2() {
					console.log('computed_2:'+this)  // this 指向的是Vue实例
					return this.name
				}
			}
		})
	</script>
</body>
</html>
99. Vue 经验总结 vue
上一篇: 图像金字塔——实现图像融合
下一篇: 用java实现的迭代和递归插入排序

继续阅读