Vue框架学习篇(二)

最新推荐文章于 2023-02-27 10:22:01 发布

SSS4362

最新推荐文章于 2023-02-27 10:22:01 发布

阅读量225

点赞数 2

分类专栏： Vue前端框架学习篇文章标签： Vue2 Vue前端框架学习判断指令普通数组循环 json数组循环

本文链接：https://blog.csdn.net/SSS4362/article/details/128927261

版权

Vue前端框架学习篇专栏收录该内容

5 篇文章 3 订阅

订阅专栏

Vue框架学习篇(二)

1 判断指令(v-if)

1.1 示例代码

<!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">
    <script src="../js/vue.js"></script>
    <title>v-if条件判断</title>
</head>
<body>
    <div id="app">
        <!-- v-if里面条件为true时该标签显示 v-else里面条件为false里面该标签显示(默认不写条件为false) 
        v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
        -->
        <div v-if="loginStatus">已登录</div>
        <div v-else="loginStatus">未登录</div>
    </div>
    <script>
        var v=new Vue({
            el:"#app",
            data:{
                loginStatus:false //登录状态 false表示未登录,true代表已登录
            }    
        })
    </script>
</body>
</html>

1.2 运行截图

1.2.1 首次进入页面时

在这里插入图片描述

1.2.2 通过console使得loginStatus变更成true后的界面

在这里插入图片描述

2 循环显示数据

2.0 语法

v-for="循环元素 in 数组名" (不含下标的写法)
v-for="(循环元素,数组下标) in 数组名"  (带上下标的写法)

2.1 普通数组

2.1.1 示例代码

<!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>普通数组循环展示数据</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>普通数组循环</h3>
        <ul>
            <!-- 循环变量(元素) in 数组名 -->
            <li v-for="g in games">{{g}}</li>
        </ul>
    </div>
    <script>
    
        var v=new Vue({
           el:'#app',
           data:{
              games:['英雄联盟','王者荣耀','梦幻西游']
           }
        })
    </script>
</body>
</html>

2.1.2 运行截图

在这里插入图片描述

2.2 json对象数组

2.2.1 示例代码

<!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>json数组循环演示</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>json数组循环</h3>
        <table border="1">
            <tr>
                <th>序号</th>
                <th>编号</th>
                <th>商品名</th>
            </tr>
            <!-- (循环变量,数组下标) in 数组名 -->
            <!-- sp是商品 s接收每个对象 i是坐标 从0开始-->
            <tr v-for="(p,i) in product">
                <th>{{i+1}}</th>
                <th>{{p.id}}</th>
                <th>{{p.name}}</th>
            </tr>
        </table>
    </div>
    <script>
    
        var v=new Vue({
           el:'#app',
           data:{
              product:[
                {
                    id:'10',name:'电脑'
                },
                {
                    id:'20',name:'鼠标'
                },
                {
                    id:'30',name:'键盘'
                },
              ]
           },
        })
    </script>
</body>
</html>