HTML之Vue框架v-for、v-if的简单使用

最新推荐文章于 2024-07-07 20:00:00 发布

你的大数据学长

最新推荐文章于 2024-07-07 20:00:00 发布

阅读量6.1k

点赞数 4

分类专栏： HTML 文章标签： vue js javascript vue.js html

本文链接：https://blog.csdn.net/qq_43198568/article/details/104363074

版权

HTML 专栏收录该内容

22 篇文章 8 订阅

订阅专栏

HTML之Vue框架 v-for、v-if 的简单使用

目标
代码
结果展示

目标

数据定义一个数组，通过对v-for的使用，实现如下界面
在这里插入图片描述
使用v-if，使上述的奇数行不出现，效果如下图所示

代码

该代码可在我的GitHub中找到，链接在此

index1.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for的使用</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-for="(value, index) in sites">{{'索引值：' + index + ' --- 每一项：' + value}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            sites: [1, 2, 3, 4, 5, 6]
        }
    })
</script>
</body>
</html>

index2.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if的使用</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-for="(value, index) in sites">
        <p v-if="index % 2 != 0">
            {{'索引值：' + index + ' --- 每一项：' + value}}
        </p>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            sites: [1, 2, 3, 4, 5, 6]
        }
    })
</script>
</body>
</html>

结果展示

index1.html 的结果图：
在这里插入图片描述
index2.html 的结果图：

你的大数据学长

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML之Vue框架v-for、v-if的简单使用

HTML之Vue框架 v-for、v-if 的简单使用目标代码结果展示目标数据定义一个数组，通过对v-for的使用，实现如下界面使用v-if，使上述的奇数行不出现，效果如下图所示代码该代码可在我的GitHub中找到，链接在此index1.html：<!DOCTYPE html><html lang="en"><head> <m...
复制链接

扫一扫

专栏目录