JS中this的使用导致网页结果不同，此处this作用

编辑网页点赞功能，实现每单击一次选框就加1

img


这是最终实现代码

<html>
    <head>
        <meta charset="utf-8">
        <title>测试 vue指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="j()">{{i}}</button>
            
        
        </div>
        <script>
            new Vue({
                el:"#app", //挂载点
                data:{  //创建函数
                        i:0,
                },
                methods:{
                    j:function(){
                        this.i++;
                    }
                
                }
                        
            })
        </script>
    </body>
</html>

如果我将j()函数中this删除

<script>
            new Vue({
                el:"#app", //挂载点
                data:{  //创建函数
                        i:0,
                },
                methods:{
                    j:function(){
                        i++;
                    }
                
                }
                        
            })
        </script>

最终显示结果

img

数字没法增加了，单击就会报错

img


我想知道为什么不加这个this就无法实现，不加的话data 中的i值就不会变吗。

是的，因为this指向的就是data里的变量。
如果不加this，就是调用你j方法里的i变量，所以报错说i变量没有定义

vue是需要new的这里this指向为new之后的vue对象

多了解一下，this，及this的作用域