v-if和v-else實例：切換登錄方式

html中

<form action="yourServer">
?<div id="app">
? ?<div id="one" v-if="flag">
? ? ?<span >普通登錄</span>
? ? ?<br>
? ? ?<label for="phone">賬號：</label>
? ? ?<input type="text" placeholder="手機號" id="phone">
? ? ?<br>
? ? ?<label for="psw1">密碼：</label>
? ? ?<input type="password" placeholder="">
? ?</div>

? ?<button @click.prevent="change">切換登錄方式</button>

? ?<button style="position:relative;left: 75px">提交</button>
?</div>
</form>

js中

data:{

flag:true

}

methods:{
change(){
?this.flag=!this.flag;
}

效果如下：

值得注意的是如果向input里面輸入內(nèi)容的話，這個內(nèi)容在兩個登錄方式下會自動進行復(fù)用，而我們想要的是每次切換都進行一個清空的操作

那么這時候我們就需要加入key屬性，當(dāng)檢測到兩個key值不相同時，就不會進行復(fù)用

<div id="one" v-if="flag" key="one">

<div id="two" v-else key="two">

或者更有針對性的

<label for="phone">賬號：</label>
<input type="text" placeholder="手機號" id="phone" key=''one'>
<br>
<label for="psw1">密碼：</label>
<input type="password" placeholder="******" id="psw1" key="one">

另外兩個為two就行

還有另外一個屬性也值得說一下，就是v-show

它是呢意為隱藏，通過boolean來判斷，適用于頻繁顯示和隱藏

當(dāng)它為false的時候，所做的操作是為對應(yīng)元素添加行內(nèi)樣式display:none

而我們的v-if為false且v-else沒有設(shè)置的時候，也是隱藏，只不過不在dom中顯示