为什么我的click方法，不能改变content内容，点击没有效果

源自：2-3 Vue实例中的数据,事件和方法

为什么我的click方法，不能改变content内容，点击没有效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue 学习</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h1 v-on:click="handleClick">{{content}}</h1>
    </div>
    <script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            content: "Hola"
        },
        methods: {
            handleClick: () => {
                this.content = "Suremotoo";
            }
        }
    });
    </script>
</body>
</html>

提问者：花草木香丶忆花间相见 2019-01-04 22:04

个回答

锅里的芒果

2019-02-14 15:06:19

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

2

花草木香丶忆花间相见: 2019-01-04 22:41:08

Sorry，我找到问题了，将以下代码替换

handleClick:  () => {
                this.content = "Suremotoo";
   }

handleClick: function() {
                this.content = "Suremotoo";
            }

看来不会es6的不要随便用。