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
Two implementations of front-end routing from vue-router
Table of contents Mode Parameters HashHistory Has...
Detailed explanation of JavaScript's built-in objects Math and strings
Table of contents Math Objects Common properties ...
How to hide a certain text in HTML?
Text hiding code, hide a certain text in HTML Copy...
Install Docker on CentOS 7
If you don't have a Linux system, please refe...
It is not recommended to copy the content in Word directly to the editor on the website.
<br />Question: Why is it not recommended to...
Using Docker run options to override settings in the Dockerfile
Usually, we first define the Dockerfile file, and...
Detailed tutorial for installing mysql 8.0.12 under Windows
This article shares with you a detailed tutorial ...
WeChat applet custom menu navigation to achieve staircase effect
Design Intentions When developing a page, you oft...
Solution to automatically trigger click events when clicking on pop-up window in Vue (simulation scenario)
Business scenario: Use vue + element ui's el-...
mysql group by grouping multiple fields
In daily development tasks, we often use MYSQL...
Detailed steps for installing and configuring MySQL 5.7
1. Download MySQL 1. Log in to the official websi...
Detailed explanation of Vue's monitoring method case
Monitoring method in Vue watch Notice Name: You s...
How to use react-color to implement the front-end color picker
background We can use react-color to implement th...
Detailed explanation of the command mode in Javascript practice
Table of contents definition structure Examples C...
Example of how to display a default image when an image does not exist in HTML
An image link <img src="" /> I wa...