小程序开发\vue.js前端开发中this是做什么用的?

去年看学习做小程序商城照葫芦画瓢学了很久才知道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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容