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

Two types of tab applications in web design

Nowadays, tabs are widely used in web design, but...

Linux kernel device driver virtual file system notes

/******************** * Virtual File System VFS *...

Why does using limit in MySQL affect performance?

First, let me explain the version of MySQL: mysql...

MySQL learning record: bloody incident caused by KEY partition

Demand background Part of the data in the busines...

Teach you how to implement the observer mode in Javascript

Table of contents What is the Observer Pattern? S...

Example of using Dockerfile to build an nginx image

Introduction to Dockerfile Docker can automatical...

jQuery realizes the scrolling effect of table row data

This article example shares the specific code of ...

18 killer JavaScript one-liners

Preface JavaScript continues to grow and prosper ...

A brief understanding of the difference between MySQL union all and union

Union is a union operation on the data, excluding...

Solution to the problem of a large number of php-cgi.exe processes on the server causing the CPU to occupy 100%

Optimize the fastcgi configuration file fcgiext.i...

Example code for drawing double arrows in CSS common styles

1. Multiple calls to single arrow Once a single a...

Creating Responsive Emails with Vue.js and MJML

MJML is a modern email tool that enables develope...

How to use lodop print control in Vue to achieve browser compatible printing

Preface This control will have a watermark at the...

Analysis of the reasons why the index does not take effect when searching in the MySql range

1 Problem Description This article sorts the esta...

CSS achieves the effect of changing the color of the entire line when the mouse is placed on it

summary: The following is a method for changing t...