10-常用指令v-for

最新推荐文章于 2024-05-14 16:05:24 发布

奔波波灞

最新推荐文章于 2024-05-14 16:05:24 发布

阅读量129

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/m0_57783938/article/details/119825451

版权

vue.js 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-常用指令v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-for指令
相当于JS中的for in循环, 可以根据数据多次渲染元素

2.v-for特点
可以遍历 数组, 字符, 数字, 对象

注意：
    这里没有用到key，在实际开发中一定要加上key！！！！

-->

<!--这里就是MVVM中的View-->
<div id="app">
    <ul>
        <li v-for="(value, index) in list">{{index}}---{{value}}</li>  //遍历数组
        <li v-for="(value, key) in obj">{{key}}---{{value}}</li>       //遍历对象
        <li v-for="(value, index) in 'abcdefg'">{{index}}---{{value}}</li>  //遍历字符串
        <li v-for="(value, index) in 6">{{index}}---{{value}}</li>          //遍历数字

    </ul>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            list: ["张三", "李四", "王五", "赵六"],
            obj: {
                name: "lnj",
                age: 33,
                gender: "man",
                class: "知播渔"
            }
        }
    });
</script>
</body>
</html>

奔波波灞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10-常用指令v-for

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>10-常用指令v-for</title> <script src="js/vue.js"></script></head><body><!--1.什么是v-for指令相当于JS中的for in循环, 可以根据数.
复制链接

扫一扫