小程序开发\vue.js前端开发中this是做什么用的？
2020-02-27 本文已影响0人
挤时间学习的阿龙
去年看学习做小程序商城照葫芦画瓢学了很久才知道methods方法里有很多this的具体意义，看完一下小案例，就明白了。
需要实现效果—点击按钮每次+1，到6时重置
方法1：直接在模版中加入点击事件判断
image.png
方法2：
（1）从方法1中移动点击事件到到方法中
image.png
点击无反应
111.gif
用app.count后，显示正常
image.png
方法3：用this替代app
image.png
（2）效果
[图片上传中...(image.png-76892f-1582784292789-0)]
111.gif
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>软件开发 QQ:97369623</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="add">{{count}}</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count:0
},
methods:{
add:function(){
if(this.count==6){
this.count=0
}else{
this.count+=1
}
}
}
})
</script>
</body>
</html>
