List rendering instructions for efficient development of Vue front-end
v-for directiveSpeaking 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:
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 propertiesGenerally, 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 propertiesIn 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. SummarizeThis 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:
|
<<: Build nginx virtual host based on domain name, port and IP
Recommend
Detailed explanation of the organizational structure diagram case of Vue's vue-tree-color component
Table of contents npm Install the loader Import P...
Detailed explanation of CSS text decoration text-decoration & text-emphasis
In CSS, text is one of the most common things we ...
UCenter Home site adds statistics code
UCenter Home is an SNS website building system rel...
Detailed explanation of Vue3's responsive principle
Table of contents Review of Vue2 responsive princ...
How to write asynchronous tasks in modern JavaScript
Preface In this article, we'll explore the ev...
Detailed graphic description of the database installation process of MySQL version 5.7.24
MySQL is the most popular relational database man...
Detailed explanation of JavaScript upload file limit parameter case
Project scenario: 1. Upload file restrictions Fun...
Understand the principle of page replacement algorithm through code examples
Page replacement algorithm: The essence is to mak...
CSS3 uses the transition property to achieve transition effects
Detailed description of properties The purpose of...
A brief discussion on macrotasks and microtasks in js
Table of contents 1. About JavaScript 2. JavaScri...
Native js imitates mobile phone pull-down refresh
This article shares the specific code of js imita...
MySQL database JDBC programming (Java connects to MySQL)
Table of contents 1. Basic conditions for databas...
HTML css js implements Tab page sample code
Copy code The code is as follows: <html xmlns=...
When Nginx is turned on, the port is occupied and prompts: Address already in use
As shown in the figure: Check port usage: sudo ne...
How does WeChat Mini Program obtain user information and user phone number at the same time
When I was writing the login page today, I needed...