Attributes in vue v-for loop object

Attributes in vue v-for loop object

1. Values ​​within loop objects

<body>



    <div id="app">

        <!-- Values ​​within loop object-->

        <ul>

            <li v-for="item in per">

                {{item}}

            </li>

        </ul>

    </div>



    <script src="./js/vue.js"></script>

    <script>



        let vm = new Vue({

            el:'#app',

            data:{

                per:

                    id:1,

                    name:'Xiaoming',

                    age:19,

                    sex:"male"

                }

            }

        })

    </script>

2. Loop Object

3. Looping keys and values

<!-- Looping over keys and values ​​-->

        <ul>

                    <!-- Value key-->

            <li v-for="(value,key) in per">

                {{value}}---{{key}}

            </li>

        </ul>

This is the end of this article about the properties of v-for loop object in vue . For more relevant content about the properties of v-for loop object, please search the previous articles of 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to use v-for loop to generate dynamic tags in Vue.js
  • 7 Ways to Write a Vue v-for Loop
  • Implementing circular scrolling list function based on Vue
  • Detailed explanation of the loop form item example in Vue
  • An example of implementing a simple infinite loop scrolling animation in Vue
  • This article will show you the event loop mechanism of vue.js

<<:  How to use translate and transition in CSS3

>>:  What is the base tag and what does it do?

Recommend

Web front-end performance optimization

Web front-end optimization best practices: conten...

Simple Mysql backup BAT script sharing under Windows

Preface This article introduces a simple BAT scri...

How to generate random numbers with specified digits in MySQL and how to generate random numbers in batches

1. First introduce several commonly used MySQL fu...

MySql 8.0.11 installation and configuration tutorial

Official website address: https://dev.mysql.com/d...

Vue realizes the sliding cross effect of the ball

This article example shares the specific code of ...

CSS optimization skills self-practice experience

1. Use css sprites. The advantage is that the smal...

How to make CSS child elements highly consistent with parent elements

Absolute positioning method: (1) Set the parent e...

Introduction to several ways to introduce CSS in HTML

Table of contents 1. Embed CSS styles directly in...

Installation and daemon configuration of Redis on Windows and Linux

# Installation daemon configuration for Redis on ...

How to check if the firewall is turned off in Linux

1. Service method Check the firewall status: [roo...

Why Use DOCTYPE HTML

You know that without it, the browser will use qui...

Detailed explanation of the four transaction isolation levels in MySQL

The test environment of this experiment: Windows ...

Summary of 10 must-see JavaScript interview questions (recommended)

1.This points to 1. Who calls whom? example: func...

MySQL 5.7 installation and configuration tutorial

This article shares the MySQL installation and co...

Example of how to implement master-slave hot standby using Docker+keepalived+nginx

Preface To solve the single point of failure, we ...