Javascript 如何从方法访问Vue.js组件数据？

基于，我希望以下代码可以工作，但单击按钮时为空：

<template>
    <div class="hello">
        <button v-on:click="test">Test </button>
    </div>
</template>

<script>
    export default {
  name: 'hello',
    methods: {
        test: () => {
            console.log('log data.message', this.msg); 
        }
    },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

以下是完整的演示：

将测试方法更改为：

test: function() {
        console.log('log data.message', this.msg); 
    }

箭头函数不会按您希望的方式绑定此项。

将测试方法更改为：

test: function() {
        console.log('log data.message', this.msg); 
    }

箭头函数不会按您希望的方式绑定它