Vue中的列表渲染（3-8）

最新推荐文章于 2024-06-07 07:15:22 发布

罗彬桦

最新推荐文章于 2024-06-07 07:15:22 发布

阅读量76

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45647118/article/details/113909070

版权

Vue 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

Vue中的列表渲染

遍历数组和遍历对象

遍历数组

最外层有没要div
<template></template>与<div></div>的区别
<template>不会有占位符<div>会有


<!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>Document</title>
    <script src='./vue.js'></script>
</head>
<body>
  	
    <div id="app">
    
       <div v-for="(item, index) of list" 
            :key="item.id">
           <div>
               {{item.text}} ---- {{index}}
           </div>
           <span>
               {{item.text}}
           </span>
       </div>
      
    </div>    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [{
                    id: "010120201",
                    text: "hello"
                }, {
                    id: "010120202",
                    text: "Dell"
                }, {
                    id: "010120203",
                    text: "Lee"
                }]
            }
        })
    </script>
</body>
</html>

遍历对象
在这里插入图片描述

(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: "Dell",
                   age: 28,
                   gender: "male",
                   salary: "secret"
               }
            }
        })
    </script>

罗彬桦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的列表渲染（3-8）

Vue中的列表渲染遍历数组和遍历对象遍历数组最外层有没要div<template></template>与<div></div>的区别<template>不会有占位符<div>会有<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
复制链接

扫一扫

专栏目录