Vue v-if v-show

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <p>--------------------</p>
        <div v-if="flag">true</div>
        <div v-else-if>false</div><!-- 根据条件变化会进行多次渲染,投机条件每次发生变化组件都会进行销毁和创建,并重新渲染 -->
        <p>--------------------</p>
        <div v-show="flag">true</div>
        <div v-show="!flag">false</div><!-- 只会进行一次初始化渲染,把所有条件的组件都渲染出来,再根据条件变化进行CSS显示和隐藏 -->
        <button @click="flag=!flag">btn</button>

    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好!',
                    flag:false
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div v-if="loginType==='phone'">
            <label>手机: </label>
            <input type="text" placeholder="请输入手机号">
            </br>
            <label>密码:</label>
            <input type="password" placeholder="请输入密码">
        </div>
        <div v-else-if="loginType==='email'">
            <label>邮箱: </label>
            <input type="text" placeholder="请输入邮箱号">
            </br>
            <label>密码:</label>
            <input type="password" placeholder="请输入密码">
        </div>
        <p>---------------------------------------</p>
        <div v-show="loginType==='phone'">
            <label>手机: </label>
            <input type="text" placeholder="请输入手机号">
            </br>
            <label>密码:</label>
            <input type="password" placeholder="请输入密码">
        </div>
        <div v-show="loginType==='email'">
            <label>邮箱: </label>
            <input type="text" placeholder="请输入邮箱号">
            </br>
            <label>密码:</label>
            <input type="password" placeholder="请输入密码">
        </div>
        <button @click="change">btn</button>
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好!',
                    loginType: 'phone'
                }
            },
            methods:{
                change(){
                    this.loginType === 'phone' ? this.loginType='email':this.loginType='phone';
                    // this.loginType === 'email' ? this.loginType='phone':tis.loginType='email';
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

 

posted @ 2021-08-17 17:29  残星  阅读(31)  评论(0编辑  收藏  举报