vue中v-for指令的使用之Vue知识点归纳(八)

本文章将描述

  • vue 指令 v-for 的基本使用

1 简述

vue 指令 v-for 用来操作 dom ,常用于数组元素的操作

2 案例


<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=divice-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue v-for指令title>
    <style>
        .active {
            border: 1px solid red;
            margin: 10px;
        }
    style>
head>

<body>
    <div id="app">

        <div class="active">
            vue v-for指令
        div>


        <ul>
            
            
            
            <li v-for="item in indexArr">
                {{item}} : 在这里实现
            li>
        ul>


        <ul>
            
            
            
            
            <li v-for="(item,index) in objectArr">
                序号 {{index}} : 姓名{{ item.name }} 年龄{{item.age}}
            li>
        ul>

    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                indexArr: [1, 2, 3, 4],
                // 对象数据类型
                objectArr: [
                    { name: "张三", age: 12 },
                    { name: "李四", age: 18 },
                    { name: "王五", age: 22 },
                ],
            },

        })
    script>
body>

html>

效果图:

vue中v-for指令的使用之Vue知识点归纳(八)_第1张图片

3 总结

vue中v-for指令的使用之Vue知识点归纳(八)_第2张图片

你可能感兴趣的:(Vue开发中的点点滴滴)