VUE-v-if和v-else的使用

1、v-if和v-else   

<h2 v-if="true">v-ifh2>
<h2 v-else>v-elseh2>

注:v-if为真 时,显示v-if的内容,否则显示v-else的内容

2、v-show

<h2 v-show="true">显示我h2>

注:v-if和v-show的区别

v-if和v-show的作用都把内容显示和隐藏,不同的是,v-if在元素隐藏的时候,是把整个DOM元素删除。v-show是在DOM元素上添加一个样式,把内容隐藏起来。

****用法:当内容需要频繁切换的时候,就用v-show,反之则用v-if

 

****切换登录方式小案例(v-if  \  v-else)

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<div id="app">
    
    <span v-if="isShow">
        <label for="user">密码登录label>
        <input type="text" id="user" placeholder="请输入你的QQ">
    span>
    <span v-else>
        <label for="email">邮箱登录label>
        <input type="text" id="email" placeholder="请输入你的邮箱">
    span>
    <button @click="change()">切换方式button>
div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                isShow: true
            }),
            methods: {
                change: function () {
                    this.isShow = !this.isShow
                    console.log(this.isShow)
                }
            }
        })
    script>
body>

html>

注:input的复用问题

  当切换方式发生改变的时候,输入框里面的内容不会清空   

 

这是因为VUE后台处理的原因。

1、因为邮箱登录和密码登录不能同时出现

2、在内容渲染到页面的时候,VUE会创建一个虚拟DOM

 VUE-v-if和v-else的使用_第1张图片

 

 所以当邮箱登录和密码登录相互切换的时候,因为组成他们的DOM元素是一样的,为了提升性能,VUE后台作出处理,当DOM元素相同时,它会复用之前的那个DOM,所以导致切换登录方式后,input里面的内容不会改变。其实他们用的就是同一个input.

解决方案

<label for="user">密码登录label>
<input type="text" id="user" placeholder="请输入你的QQ" key="a">

在input里面加上一个key---唯一标识

当两个input里面的key相同时,input就会复用,反之就不会复用

 

你可能感兴趣的:(VUE-v-if和v-else的使用)