Javascript Vue on:单击似乎调用所有方法

我目前正在学习Vue，遇到了一个问题，希望有人能帮我解决

当使用v-on:click指令调用一个方法时，如果该方法也在其他地方使用，则会调用所有其他实例方法

HTML:

在第二段中使用{roll20（）}}时，单击“新挑战”按钮将运行roll20（）和newCheck（）。但是，如果在第二段中使用{{yourRoll}}，则不会发生这种情况

在这两种情况下，单击“滚动！”仅运行roll20（）

有人能解释一下这里发生了什么吗

以下是该问题的代码笔：

注意：我最终通过使用不同的方法绕过了这个问题，但我仍然想知道为什么会发生这种情况：

每当更新DOM时，它都会再次运行

roll20

，因为行：

您滚动了一个{{roll20（）}

因此，任何触发更新的操作都会触发

roll20

现在，由于模板：

新挑战

我们知道，当您点击

newchallenge

时，它会调用

newCheck

方法

由于

newCheck

方法更改了模板中使用的变量（

passCheck

）：

newCheck:function（）{
this.passCheck=Math.round（Math.random（）*19）+1；
}

这里使用的是：

成功检查是：{{passCheck}

更改密码检查将触发DOM更新。DOM更新将自动调用

roll20

（由于本答案第一段所述的原因）

---

围绕它开展工作： 最简单的方法就是不要在模板中调用

roll20

。当

roll20

实际更新

yourRoll

属性时：

    roll20: function(){
        this.yourRoll = Math.round(Math.random()*19)+1;
        return this.yourRoll;
    },

您可以在模板中使用

yourRoll

，而不是

roll20（）

：

你掷了一个{{yourRoll}

代码笔：

新挑战
成功检查是：{{passCheck}

滚！
你掷了一个{{yourRoll}}

新Vue({
el:'练习'，
数据：{
你的名单：“10”，
通行证：'10'，
},
方法：{
roll20:function（）{
this.yourRoll=Math.round（Math.random（）*19）+1；
},
newCheck:function（）{
this.passCheck=Math.round（Math.random（）*19）+1；
}
}
});

---

试试这个，它很好用！只输出您的数据属性，因为在其中一个中，您正在调用该方法

非常感谢你的解释。我不知道虚拟DOM在这里是如何工作的。

new Vue({
    el: '#exercise',
    data: {
        yourRoll: '10',
        passCheck: '10',    
    },
    methods: {
        roll20: function(){
            this.yourRoll = Math.round(Math.random()*19)+1;
            return this.yourRoll;
        },
        newCheck: function(){
            this.passCheck = Math.round(Math.random()*19)+1;
        }
    }
});

    roll20: function(){
        this.yourRoll = Math.round(Math.random()*19)+1;
        return this.yourRoll;
    },

<p>You Rolled a {{ yourRoll }}</p>

<div id="exercise">
        <div><button class="test" v-on:click="newCheck()">New Challenge</button>
    <p >Success check is: {{ passCheck }}</p>
    <!-- 3) Call a function to output a random float between 0 and 1 (Math.random()) -->
        </div>
        <div>
        <button class="roll" v-on:click="roll20()">Roll!</button>
    <p>You Rolled a {{ yourRoll }}</p> <!-- this changed -->
        </div>
</div>

new Vue({
    el: '#exercise',
    data: {
        yourRoll: '10',
        passCheck: '10',    
    },
    methods: {
        roll20: function(){
            this.yourRoll = Math.round(Math.random()*19)+1;
        },
        newCheck: function(){
            this.passCheck = Math.round(Math.random()*19)+1;
        }
    }
});