Vue入门 Demo12 Vue中的列表渲染

最新推荐文章于 2024-06-28 17:29:09 发布

城南花已开呀

最新推荐文章于 2024-06-28 17:29:09 发布

阅读量137

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36778310/article/details/104698369

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue入门 Demo12 Vue中的列表渲染

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>Vue中的列表渲染</title> 
        <script src="./vue.js"></script>
        
    </head> 
    <body>
        <!-- 数组循环开始  -->
       <!-- <div id="app">  
            <div 
                v-for="(item,index) of list"
                :key="item.id"
            >
             {{item.text}} --- {{index}}
             </div>
        </div>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    list: [
                        {
                            id: "1",
                            text: "1",
                        },
                        {
                            id: "2",
                            text: "2",
                        },
                        {
                            id: "3",
                            text: "3",
                        }
                   ]
                },
                methods: {
                    
                }
            })
        </script> -->
        <!-- 数组循环结束  -->

        <!-- 对象循环开始 item:循环内容  key:键值  index:索引 -->
        <div id="app">  
            <div
               v-for= "(item,key,index) of userInfo" 
            >
               {{item}} --- {{key}}  --- {{index}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    userInfo: {
                        name: "hewen",
                        age: "25",
                        gender: "male",
                    }
                },
                methods: {
                    
                }
            })
        </script> 
         <!-- 对象循环结束 -->
    </body> 
</html>

城南花已开呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门 Demo12 Vue中的列表渲染

Vue入门 Demo12 Vue中的列表渲染<!DOCTYPE html><html lang="en"> <head> <meta content="text/html; charset=utf-8" /> <title>Vue中的列表渲染</title> ...
复制链接

扫一扫

专栏目录