vue小案例---v-if条件判断、v-for循环

最新推荐文章于 2024-05-15 18:27:31 发布

new DFP

最新推荐文章于 2024-05-15 18:27:31 发布

阅读量1.1k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_53472653/article/details/122630329

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="E:\Vue_demo\js\vue.js" type="text/javascript" charset="UTF-8"></script>

</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="ok"/>
        <br/>
        <div v-if="ok">选中了</div>
        <div v-else="ok">没选中</div></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:"false"
            }
        })
    </script>
</body>

</html>

首先就是创建一个简单vue模板

然后在一个盒子里创建一个checkbox给他进行一个双向绑定当我们没选择这个checkbox的时候模板中的ok=false就会显示没选中的盒子相反是选中了的盒子

效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="E:\Vue_demo\js\vue.js" type="text/javascript" charset="UTF-8"></script>
</head>

<body>
    <div id="app">
        <div v-for="(user,index) in userList">
            {{index}}-{{user.name}}-{{user.age}}
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {"name":"Tom","age":18},
                    {"name":"jock","age":21}
                ]
            }
        })
    </script>
</body>
</html>

依然是先创建一个简单vue模板

创建一个userList的对象

在盒子中通过v-for获取到对象并且赋值给user并且每次获取当前的下标index

通过{{}}的插值语句将获取值插入

效果

new DFP

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue小案例---v-if条件判断、v-for循环

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
复制链接

扫一扫