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关键字