vue条件判断循环

条件判断 v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-if="isShow">holle world</p>
        <p v-else>holle python</p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                isShow:true,
            },
            methods:{
                
            }
        })

    </script>
</body>
</html>

 

条件显示 v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-show 是样式上的修改 display:none -->
    <!-- v-if dom元素直接不存在 -->
    <!-- 显示和隐藏高频切换时用v-show -->
    <div id="app">
        <p v-show="isShow">holle world</p>
        <p v-show="noShow">holle world</p>

    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                isShow:true,
                noShow:false,
            },
            methods:{
                
            }
        })

    </script>
</body>
</html>

 

循环 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in names">{{index+1}} {{item}}</li>
        </ul>
        
        <ul>
            <li v-for="(item, key, index) in arr" :key="item">{{index}}.{{key}} :{{item}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                names:["moon", "light", "is", "beautiful"],
                arr:{
                    name:"moon",
                    age:18,
                    height:178,
                    weight:130
                }
            },
            methods:{
                
            }
        })

    </script>
</body>
</html>

 

用户切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 存在小问题， 在用户输入值后，切换方式，内容不会清空  可用key来做区别，不同的时候就不会复用-->
    <div id="app">
        <span v-if="isChange"><label for="账号">账号：</label><input id="username" type="text" placeholder="账号登录" key="username"></span>
        <span v-else><label for="邮箱">邮箱：</label><input id="mail" type="text" placeholder="邮箱登录" key="mail"></span>
        <input type="button" :value="value" @click="btmclick"></input>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data:{
                isChange:true,
            },
            methods:{
                btmclick(){
                    this.isChange = !this.isChange
                }
            },
            computed:{
                value(){
                    if (this.isChange){
                        return "邮箱登录"
                    }
                    else{
                        return "账号登录"
                    }
                }
            }

        })

    </script>
</body>
</html>

 

posted @ 2023-03-14 11:01  Wchime  阅读(55)  评论(0)    收藏  举报