今天在看Vue的官方Doc,然后照著上面的例子寫了點(diǎn)demo，但是關(guān)于v-if條件渲染有點(diǎn)疑惑，我的代碼如下：

<div id="demo1">
        <div v-if="Math.random() > 0.5">
                Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>

        <template v-if="loginType === 'Username'">
            <label>{{ loginType }}</label>
            <input type="text" placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>{{ loginType }}</label>
            <input type="text" placeholder="Enter your email" key="email-input">
        </template>
        <button v-on:click="changeLoginType">Toggle login type</button>
    </div>
    
    // 此處忽略一些代碼
    <script>
    var watch_example = new Vue({
        el: '#demo1',
        data: {
            loginType: 'Username',
        },
        methods: {
            changeLoginType: function () {
                this.loginType == 'Username' ? this.loginType = 'Email' : this.loginType = 'Username'
            }
        }
    })
    </script>

說(shuō)明：Vue.js版本：v2.5.1

我的問(wèn)題是：

當(dāng)我點(diǎn)擊button的時(shí)候，changeLoginType()函數(shù)可以成功執(zhí)行，但是也同時(shí)觸發(fā)到了代碼中的第一個(gè)v-if，就是那個(gè)Math.random()函數(shù)

沒(méi)點(diǎn)擊之前效果：

點(diǎn)擊之后（由于是random()隨機(jī)的，效果不是每次都有，但足以說(shuō)明random()函數(shù)是執(zhí)行了的）：

為什么點(diǎn)擊button會(huì)觸發(fā)到random()呢？