Examples of List Functions
Step 1: List function
The complete code is as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.table {
width: 800px;
margin: 20px auto;
border-collapse: collapse; /* This line cannot be omitted: the two borders of the table are merged into one */
}
.table th {
background: #0094ff;
color: white;
font-size: 16px;
border: 1px solid black;
padding: 5px;
}
.table tr td {
text-align: center;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
</style>
<script src="Vue2.5.16. Js"></script>
</head>
<body>
<div id="app">
<table class="table">
<th>Serial number</th>
<th>The name of the</th>
<th>Creation time</th>
<th>operation</th>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="#">delete</a></td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app'.data: {
list: [{id: 1.name: 'Mercedes'.ctime: new Date}, {id: 2.name: 'the public'.ctime: new Date}]}})</script>
</html>
Copy the codeCode analysis: data is stored in the list of data, data in the data through V-for traversal to the table.
The code above runs like this:
Step 2: If no data is available, add a prompt
If there is no data in the list, then only the table header will be displayed in the table, which is obviously not pretty.
To do this, we need to add a V-if judgment: a prompt is displayed when the data is empty. As follows:
<tr v-show="list.length == 0">
<td colspan="4">No data in the list</td>
</tr>
Copy the codeColspan =”4″ refers to the position where the current < TD > spans four cells. As follows:
Step 3: Add item
The specific implementation steps are as follows:
(1) The data filled in by the user is stored separately in the data attribute, and v-Model is used for two-way binding.
(2) After the user fills in the data, click the Add button. You need to add a click-event method that puts the data from the data into the list (and at the same time, empties the text box).
(3) Show the data. When the list array changes, vue.js automatically calls v-for to regenerate the data. In this case, the data is automatically refreshed.
The complete code is as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.table {
width: 800px;
margin: 20px auto;
border-collapse: collapse; /* This line cannot be omitted: the two borders of the table are merged into one */
}
.table th {
background: #0094ff;
color: white;
font-size: 16px;
border: 1px solid black;
padding: 5px;
}
.table tr td {
text-align: center;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
.form {
width: 800px;
margin: 20px auto;
}
.form button {
margin-left: 10px;
}
</style>
<script src="Vue2.5.16. Js"></script>
</head>
<body>
<div id="app">
<div class="form">No. :<input type="text" v-model="formData.id">Name:<input type="text" v-model="formData.name">
<button v-on:click="addData">add</button>
</div>
<table class="table">
<th>Serial number</th>
<th>The name of the</th>
<th>Creation time</th>
<th>operation</th>
<tr v-show="list.length == 0">
<td colspan="4">No data in the list</td>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="#">delete</a></td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app'.data: {
list: [{id: 1.name: 'Mercedes'.ctime: new Date}, {id: 2.name: 'the public'.ctime: new Date}].// Data added by the user
formData: {
id: 0.name: ""}},methods: {
addData: function () {
// Append data to list
var p = {id: this.formData.id, name: this.formData.name, ctime: new Date(a)};this.list.push(p);
// Clear the data in the text box on the page
this.formData.id = 0;
this.formData.name = ' '; }}});</script>
</html>
Copy the codeStep 4: Delete item
HTML part:
<! -- Bind the delete event, delete according to the arguments in parentheses -->
<td><a href="#" v-on:click="delData(item.id)">delete</a></td>
Copy the codeJs:
delData: function (id) {
// 0 alerts the user whether to delete data
if(! confirm('Do you want to delete data? ')) {
// When the user clicks the cancel button, the following code in this method should be blocked
return;
}
// 1 Call list.findIndex() to get the index of the data to be dropped based on the id passed in.
var index = this.list.findIndex(function (item) {
return item.id == id
});
// 2.0 Call method: list.splice(index to be deleted, number of elements to be deleted)
this.list.splice(index, 1);
}
Copy the codeFind () and findIndex() are new functions for arrays in ES6. Detailed explanation is as follows:
// get the subscript according to id
// By default, the list is iterated, passing each element in the list to function item.
var index = this.list.findIndex(function(item){
// Match the id passed in according to the id attribute in item
// If so, return true; If not, return false and continue with the following data traversal, and so on
return item.id ==id; // If true is returned, the findIndex method returns the index corresponding to this item
});
Copy the codeThat is, we find out which index of the list this item belongs to based on item.id. If we find index, we can delete that element from the array based on index.
When the item is deleted, v-for is called automatically, which updates the view automatically.
Full version code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.table {
width: 800px;
margin: 20px auto;
border-collapse: collapse; /* This line cannot be omitted: the two borders of the table are merged into one */
}
.table th {
background: #0094ff;
color: white;
font-size: 16px;
border: 1px solid black;
padding: 5px;
}
.table tr td {
text-align: center;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
.form {
width: 800px;
margin: 20px auto;
}
.form button {
margin-left: 10px;
}
</style>
<script src="Vue2.5.16. Js"></script>
</head>
<body>
<div id="app">
<div class="form">No. :<input type="text" v-model="formData.id">Name:<input type="text" v-model="formData.name">
<button v-on:click="addData">add</button>
</div>
<table class="table">
<th>Serial number</th>
<th>The name of the</th>
<th>Creation time</th>
<th>operation</th>
<tr v-show="list.length == 0">
<td colspan="4">No data in the list</td>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<! -- Bind the delete event, delete according to the arguments in parentheses -->
<td>
<a href="#" v-on:click="delData(item.id)">delete</a>
</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app'.data: {
list: [{ id: 1.name: 'Mercedes'.ctime: new Date }, { id: 2.name: 'the public'.ctime: new Date}].// Data added by the user
formData: {
id: 0.name: ""}},methods: {
addData: function () {
// Append data to list
var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
this.list.push(p);
// Clear the data in the text box on the page
this.formData.id = 0;
this.formData.name = ' ';
}, // Note that methods are separated by commas, which you should not forget
delData: function (id) {
// 0 alerts the user whether to delete data
if(! confirm('Do you want to delete data? ')) {
// When the user clicks the cancel button, the following code in this method should be blocked
return;
}
// 1 Calls list.findIndex() to get the index of the data to be dropped based on the passed ID
var index = this.list.findIndex(function (item) {
return item.id == id
});
// 2 Call method: list.splice(index to be deleted, number of elements to be deleted)
this.list.splice(index, 1); }}});</script>
</html>
Copy the codeStep 5: Filter items by criteria
The desired effect now is to enter the keyword keywords in the search box and display only the matched content in the list. In other words:
-
Previously, the data in the V-for was rendered directly from the list on the data.
-
Now, when we iterate through the display using V-for, we can no longer iterate through the entire list; We need to customize a search method and pass the keyword as an argument to the search method. V -for=”item in search(keywords)”.
In the search(keywords) method, there are two ways to get the matched item from the list array. As follows.
ForEach + indexOf()
search(keywords) { // Search the data according to the keyword and return the matching item
// Implement one: match with indexOf().
var newList = [];
this.list.forEach(item= > {
if(item.name.indexOf(keywords) ! = -1) { // As long as it does not equal -1, a match is found
newList.push(item)
}
})
return newList
}
Copy the codeIn the code above, note the use of indexOf(STR). Examples are as follows:
var str = 'smyhvae';
console.log(str.indexOf('s')); // Prints the result: 0
console.log(str.indexOf(' ')); // Prints the result: 0. (Note that zero is returned even if an empty string is matched.)
console.log(str.indexOf('h')); // Print the result: 3
console.log(str.indexOf('x')); // Prints the result: -1 (note, no string can be matched)
Copy the codeIn the code above, that is, if the argument is an empty string, then every item is matched.
Method 2: Filter + includes()
search(keywords) { // Search the data according to the keyword and return the matching item
var newList = this.list.filter(item= > {
/ / note: ES6, as a String provides a new method, called String. Prototype. Includes (' to contain the String ')
// Return true if contained, false otherwise
if (item.name.includes(keywords)) {
return item
}
})
return newList
}
Copy the codeNote: forEach some filter findIndex, these are all new methods in the array, and they’re going to iterate over each item in the array. Here we use the filter method in the array,
Overall, method 2 is more elegant because the includes() method of the string is really useful.
The full version code is as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.table {
width: 800px;
margin: 20px auto;
border-collapse: collapse;/* This line cannot be omitted: the two borders of the table are merged into one */
}
.table th {
background: #0094ff;
color: white;
font-size: 16px;
border: 1px solid black;
padding: 5px;
}
.table tr td {
text-align: center;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
.form {
width: 800px;
margin: 20px auto;
}
.form button {
margin-left: 10px;
}
</style>
<script src="Vue2.5.16. Js"></script>
</head>
<body>
<div id="app">
<div class="form">No. :<input type="text" v-model="formData.id">Name:<input type="text" v-model="formData.name">
<button v-on:click="addData">add</button>Search:<input type="text" v-model="keywords">
</div>
<table class="table">
<th>Serial number</th>
<th>The name of the</th>
<th>Creation time</th>
<th>operation</th>
<tr v-show="list.length == 0">
<td colspan="4">No data in the list</td>
</tr>
<tr v-for="item in search(keywords)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<! -- Bind the delete event, delete according to the arguments in parentheses -->
<td>
<a href="#" v-on:click="delData(item.id)">delete</a>
</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app'.data: {
list: [{ id: 1.name: 'Mercedes'.ctime: new Date }, { id: 2.name: 'the public'.ctime: new Date}].// Data added by the user
formData: {
id: ' '.name: ""
},
keywords: ""
},
methods: {
addData: function () {
// Append data to list
var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
this.list.push(p);
// Clear the data in the text box on the page
this.formData.id = ' ';
this.formData.name = ' ';
}, // Note that methods are separated by commas, which you should not forget
delData: function (id) {
// 0 alerts the user whether to delete data
if(! confirm('Do you want to delete data? ')) {
// When the user clicks the cancel button, the following code in this method should be blocked
return;
}
// 1 Calls list.findIndex() to get the index of the data to be dropped based on the passed ID
var index = this.list.findIndex(function (item) {
return item.id == id
});
// 2 Call method: list.splice(index to be deleted, number of elements to be deleted)
this.list.splice(index, 1);
},
search(keywords) { // Search the data according to the keyword and return the matching item
var newList = this.list.filter(item= > {
/ / note: ES6, as a String provides a new method, called String. Prototype. Includes (' to contain the String ')
// Return true if contained, false otherwise
if (item.name.includes(keywords)) {
return item
}
})
return newList
}
}
});
</script>
</html>
Copy the code