List rendering instructions for efficient development of Vue front-end

List rendering instructions for efficient development of Vue front-end

v-for directive

Speaking of lists, we have to mention loops. The v-for instruction is an operation that can implement loops in Vue.

The v-for directive is a directive for repeated rendering based on an array, and is usually used to display lists and tables.

grammar:

<ul v-for="(key, value, index) in array">
<li>{{index}}:{{value}}:{{key}}</li>
</ul>

example:

<body>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            list-style: none;
        }
    </style>
    <!--Traverse the data-->
    <div id="app">
        <!--item: key-->
        <!--value: value-->
        <!--index: subscript-->
        <ul v-for="(item,value,index) in people">
            <li>{{index}}:{{value}}:{{item}}</li>
        </ul>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                text: "Our journey is to the stars and the sea!",
                arr: ["Macabaca", "Ummm", "Little Dot", "Tom Blido", "Ding Ding Car"],
                people:
                    id: 1,
                    name: "Chow Yun-fat",
                    age: 65
                }
            }
        })
    </script>
</body>

As can be seen from the examples, the v-for directive can not only traverse strings and arrays, but also traverse object types, and display them in list or table form according to key values ​​and indexes.

Computed properties

Generally, in project development, data often needs to be processed. In addition to using basic expressions and filters, you can also use Vue's calculated properties, optimize programs, and complete complex calculations.

Example: Implement fuzzy filtering as well as adding and deleting.

First, use the v-for statement to display data in a table

        <table class="table table-hover table-border">
            <tr class="info">
                <th>Number</th>
                <th>Name</th>
                <th>Age</th>
                <th>Introduction</th>
            </tr>
            <tr v-for="item in lists">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age+"岁"}}</td>
                <td>{{item.show}}</td>
            </tr>
        </table>

    <script>
        new Vue({
            el: "#app",
            data: {
                "lists": [{
                    "id": 1,
                    "name": "Zhang San",
                    "age": 18,
                    "show": "Zhang San's introduction"
                }, {
                    "id": 2,
                    "name": "Li Si",
                    "age": 19,
                    "show": "Li Si Introduction"
                }, {
                    "id": 3,
                    "name": "Wang Wu",
                    "age": 20,
                    "show": "Introduction to Wang Wu"
                }, {
                    "id": 4,
                    "name": "Zhao Liu",
                    "age": 21,
                    "show": "Introduction to Zhao Liu"
                }, {
                    "id": 5,
                    "name": "Sun Ba",
                    "age": 22,
                    "show": "Introduction to Sun Ba"
                }]
            }
    </script>

Using calculated attributes to implement fuzzy query

        <p><input type="text" v-model="selectkey" placeholder="Please enter"></p>

            computed: {
                newlist: function() {
                    var _this = this;
                    return _this.lists.filter(function(val) {
                        return val.name.indexOf(_this.selectkey) != -1;
                    })
                }
            }

Write the calculated property in the computed option in the form of a function, change the collection traversed by the v-for statement to the filtered newlist collection, filter the data in the lists collection by judging whether there is a substring in the string, and then give the filtered data to v-for traversal and display.

Implementing Add and Remove

        <p class="input-group">
            <span class="input-group-addon">Number:</span>
            <input type="text" v-model="id" placeholder="Please enter the number" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">Name:</span>
            <input type="text" v-model="name" placeholder="Please enter your name" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">Age:</span>
            <input type="text" v-model="age" placeholder="Please enter your age" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">Information:</span>
            <input type="text" v-model="show" placeholder="Please enter information" class="form-control">
        </p>
        <p class="input-group">
            <button @click="add()" class="btn btn-primary">Add information</button>
        </p>

<td>
	<button v-on:click="dels(item.id)" class="btn btn-primary">Delete</button>
</td>

            methods: {
                add: function() {
                    var girl = {
                        "id": this.id,
                        "name": this.name,
                        "age": this.age,
                        "show": this.show
                    }
                    this.lists.push(girl);
                },
                dels: function(o) {
                    //Delete the subscript, delete a few for (let i = 0; i < this.lists.length; i++) {
                        if (this.lists[i].id == o) {
                            this.lists.splice(i, 1);
                        }
                    }
                }
            }

Bind events through methods and add two button event methods, add and dels, to handle add and delete operations.

To add, use the push method. To delete, use the splice method only to delete by subscript. The value passed is the id, so in order to ensure correctness, you need to loop to determine the subscript and perform the deletion operation.

This is a computed property. Used to process data.

Listener properties

In addition to calculated properties, Vue also provides monitoring properties for processing data and observing data changes.

The difference is that the listening property needs to have two parameters, one is the current value and the other is the updated value.

example:

watch:
        first: function (val) {
               this.full = val + ' ' + this.last
        },
        last: function (val) {
               this.full = this.first + ' ' + val
       }
}

Compared with monitoring properties, calculated properties are obviously better than monitoring properties, so unless there are special circumstances, it is recommended to give priority to using calculated properties.

Summarize

This is the end of this article about list rendering instructions for efficient Vue front-end development. For more relevant Vue list rendering content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of the first introductory tutorial of Vuejs (one-way binding, two-way binding, list rendering, response function)
  • VUEJS practice: building the foundation and rendering the list (1)
  • In-depth understanding of Vue's conditional rendering and list rendering
  • Detailed explanation of vuejs v-for list rendering
  • Vue.js implements batch rendering of Json array object list data based on v-for
  • Detailed explanation of Vue list page rendering optimization
  • Vue.JS Getting Started Tutorial: List Rendering
  • Vue.js learning tutorial list rendering detailed explanation
  • The correct way to bind jQuery plugin to Vue.js list rendering
  • Vue listens to list item rendering event method

<<:  Build nginx virtual host based on domain name, port and IP

>>:  A brief analysis of using JDBC to operate MySQL requires adding Class.forName("com.mysql.jdbc.Driver")

Recommend

mysql 8.0.16 winx64.zip installation and configuration method graphic tutorial

This article shares the specific code of MySQL 8....

Detailed explanation of non-parent-child component communication in Vue3

Table of contents First method App.vue Home.vue H...

Ubuntu E: Unable to obtain lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarily unavailable)

Ubuntu 18.04, other versions of Ubuntu question: ...

How to use file writing to debug a Linux application

In Linux, everything is a file, so the Android sy...

JavaScript method to delete or extract specified characters from a string (very commonly used)

Table of contents 1. substring() 2. substr() 3.in...

How to run top command in batch mode

top command is the best command that everyone is ...

Each time Docker starts a container, the IP and hosts specified operations

Preface Every time you use Docker to start a Hado...

How to use DCL to manage users and control permissions in MySQL

DCL (Data Control Language): Data control languag...

Docker container log analysis

View container logs First, use docker run -it --r...

Python virtual environment installation and uninstallation methods and problems encountered

Ubuntu16.04 install and uninstall pip Experimenta...

React uses routing to redirect to the login interface

In the previous article, after configuring the we...

How to use JavaScript to get the most repeated characters in a string

Table of contents topic analyze Objects of use So...

jQuery+h5 realizes the nine-square lottery special effect (front-end and back-end code)

Preface: Front-end: jq+h5 to achieve the nine-gri...

Detailed explanation of how to install MariaDB 10.2.4 on CentOS7

CentOS 6 and earlier versions provide MySQL serve...

MySQL uses limit to implement paging example method

1. Basic implementation of limit In general, the ...