问一个关于v-if的问题

<div v-if="Math.random() > 0.5">v-if</div>
<div v-else-if="Math.random() > 0.8">v-else-if</div>
<div v-else>v-else</div>
<template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="please enter your username">
</template>
<template v-else>
    <label>Password</label>`Preformatted text`
    <input placeholder="please enter your password">
</template>
<button @click="toggleChange">change Toggle</button>
       toggleChange:function () {
            if(this.loginType === 'username'){
                this.loginType = 'password';
            }else{
                this.loginType = 'username';
            }
            this.ok = !this.ok
        }

当我点击change Toggle按钮的时候,

v-if
为什么会重新触发?求讲解

你的toggleChange()在哪儿?

看一下,我更新了一下toggle

v-if本来就会重新渲染,v-show是改变display属性

我点击button会触发所有的v-if重新渲染?

好吧,测了下,确实这样。你要实现什么效果,会有什么影响呢

我想知道为什么,没有影响

我也遇到了同样的问题,而且是有影响的,这个dom更新的机制很迷

v-if 当它为true的时候,表示它存在元素节点,false表示不存在,你改变了它的状态,相当于把之前存在的节点元素给删了或是添加了一个节点元素,添加一个节点后会重新渲染

vue是双向绑定。你的toggleChange改变了logintype的值,那么所有与logintype有关的都会被重新计算,重新渲染