<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>RunJS </title>
</head>
<body>
<div id="helloApp">
{{test}}
<button @click="fun1"> te</button>
</div>
</body>
<script>
var helloApp = new Vue({
el: "-sharphelloApp",
data: {
test: "200"
},
methods: {
fun1: function() {
this.test = "300"
this.$options.methods.fun2()
},
fun2: function() {
alert(this.test)
this.test = "400"
}
}
})
</script>
</html>
Code as above, vue2.0,fun1 calls fun2, but alert is undefined, and the value of test after execution is 300, can you explain it, thank you!