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

Detailed analysis of when tomcat writes back the response datagram

The question arises This question arose when I wa...

What is flex and a detailed tutorial on flex layout syntax

Flex Layout Flex is the abbreviation of Flexible ...

Solve the problem that ifconfig and addr cannot see the IP address in Linux

1. Install the Linux system on the virtual machin...

Mysql NULL caused the pit

Using NULL in comparison operators mysql> sele...

How to use JavaScript to implement sorting algorithms

Table of contents Bubble Sort Selection Sort Inse...

Several ways to encrypt and decrypt MySQL (summary)

Table of contents Written in front Two-way encryp...

Examples of using temporary tables in MySQL

I've been a little busy these two days, and t...

Understanding MySQL index pushdown in five minutes

Table of contents What is index pushdown? The pri...

Implementation code for operating mysql database in golang

Preface Golang provides the database/sql package ...

Detailed usage of React.Children

Table of contents 1. React.Children.map 2. React....

Detailed explanation of the differences between var, let and const in JavaScript es6

First, a common question is, what is the relation...

Tips on making web pages for mobile phones

Considering that many people now use smartphones, ...

Implementation steps for docker-compose to deploy etcd cluster

Table of contents Write docker-compose.yml Run do...

How to handle MySQL numeric type overflow

Now, let me ask you a question. What happens when...

Display ellipsis effect when table cell content exceeds (implementation code)

illustrate In front-end development, you often en...