Vue 条件语句 v-if、循环语句 v-for

最新推荐文章于 2023-02-21 13:55:44 发布

一起码代码

最新推荐文章于 2023-02-21 13:55:44 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43423864/article/details/109692721

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

条件语句 v-if 案例：

<body>
    <div id="app">
        <input type="checkbox" v-model="ok"/>是否同意
        <!--条件指令 v-if  v-else -->
        <h1 v-if="ok">现在是yes</h1>
        <h1 v-else>现在是false</h1>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

结果：
在这里插入图片描述

循环语句 v-for：

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10"> {{n}} </li>
        </ul>
        <ul>
            <li v-for="(n,index) in 10">{{n}} -- {{index}}</li> 
            <!--这里的n是值，index是索引-->
        </ul>

        <hr/>
        <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                        { id: 1, username: 'helen', age: 18 },
                        { id: 2, username: 'peter', age: 28 },
                        { id: 3, username: 'andy', age: 38 }
                    ]
            }
        })
    </script>
</body>

结果:
在这里插入图片描述
n的值是从1到10，而索引值是从0到9

帮助到您请点赞关注收藏谢谢！！

一起码代码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 条件语句 v-if、循环语句 v-for

条件语句 v-if 案例：<body> <div id="app"> <input type="checkbox" v-model="ok"/>是否同意  <h1 v-if="ok">现在是yes</h1> <h1 v-else>现在是false</h1> </div>
复制链接

扫一扫

专栏目录