vue 数据更新之后却没有更改html

Question

根据事件修改了数据，但是html却没有更新。大哥们帮我看看啥情况

<div id="demo" >
        <h3  @mouseover="showTip" @mouseout="hiddenTip">
            
            <i ></i>here</h3>
            <div  v-show="isActive">
                <i ></i>
                <div>hidden content</div>
            </div>
    </div>

var demo = new Vue({
    el: '#demo',
    data: {
        isActive: false
    },
     methods: {
        showTip: () => {
            this.isActive = true;
            console.log(this.isActive);
        },
        hiddenTip: () => {
            this.isActive = false;
            console.log(this.isActive);
        }
    },
})

Answer 1

箭头函数的this会绑定当前作用域，你在vue实例的methods对象方法使用箭头函数，此时箭头函数中的this会指向methods对象，而methods对象中没有isActive属性。把箭头函数修改成普通的匿名函数就可以解决这个问题，关于this的指向问题可以参考我之前写的文章，哈哈哈。

JavaScript中this关键字

Answer 2

vue.js API文档 methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

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

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

Answer 3

应该是这里的箭头函数造成的问题，跟this有关
https://jsfiddle.net/littlemo...