Vue从零开始总结14

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里面输入内容的话，这个内容在两个登录方式下会自动进行复用，而我们想要的是每次切换都进行一个清空的操作

那么这时候我们就需要加入key属性，当检测到两个key值不相同时，就不会进行复用

<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来判断，适用于频繁显示和隐藏

当它为false的时候，所做的操作是为对应元素添加行内样式display:none

而我们的v-if为false且v-else没有设置的时候，也是隐藏，只不过不在dom中显示