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 @   Wchime  阅读(45)  评论(0)  编辑  收藏  举报
相关博文：
·  vue高阶函数
·  vue表单绑定v-model
·  Vue-条件判断与循环遍历
·  Vue条件与循环
·  Vue 笔记
阅读排行：
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae