In the past two days, I followed a few videos I collected a long time ago, (the video is a newcomer training material sent to me by my predecessors when I was employed before) and the authoritative guide to Vue.JS. Now let's implement a simple exercise of adding, deleting, and checking. If there is any misunderstanding in the code, you are welcome to correct me. I will learn with an humility and I am willing to make progress with you.
Main text
The project I did before has many similar pages. I can't find the prototype picture. I will start by animating a rather scribbled picture. The requirement of this exercise is to complete the add, delete and query functions of favorite items.
Code example:
<div id="app">
<div class="panel panel-primary">
<div class="panel-body form-inline addArea">
<label>它的编号：
<input type="text" class="form-control" v-model="id">
</label>
<label>它的名字：
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>它的编号</th>
<th>它的名字</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{
{item.id}}</td>
<td v-text="item.name"></td>
<td>{
{item.time}}</td>
<td>
<a href="">狠心删除</a>
</td>
</tr>
</tbody>
</table>
</div>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{
id: 1, name: "某克钢笔", time: new Date() },
{
id: 2, name: "某红书APP", time: new Date() },
{
id: 3, name: "小龙虾", time: new Date() },
{
id: 4, name: "某抑郁音乐", time: new Date() }
]
},
})
Note: 1. Bootstrap is used in the style and needs to be imported. 2. The data is hard-coded.
Page structure effect:
1. New operation:
Step analysis:
① Bind the click event to the button.
② Get id and name. It has been defined in data and can be obtained directly from data.
③ Create a new object and add this object to the current list.
Code example:
<input type="button" value="添加" class="btn btn-primary" @click="add()">
methods: {
add() {
// 添加方法
var loveAPP = {
id: this.id, name: this.name,time: new Date() };
this.list.push(loveAPP);
// 添加完成后，将input的值清空
this.id = this.name = '';
}
}
Page effect display:
At this time, the fifth piece of data can be manually added successfully.
2. Delete operation:
Step analysis:
① Bind the click event to the button.
② Because it is fake data, it is most suitable to delete according to the index, and you need to find the corresponding index.
③ Call the splice() method of the array.
Code example:
<a href="" @click.prevent="del(item.id)">狠心删除</a>
del(id) {
// 根据索引删除数据。
this.list.some((item, i)=>{
if(item.id===id) {
// 如果遍历的id等于我们传入的id，那么停止遍历。
this.list.splice(i, 1);
return true;
}
})
}
There is also an easier way to implement the delete function:
code example:
del(id) {
// findIndex()方法可以直接找到数组的索引
var index = this.list.findIndex(item => {
if(item.id==id) {
return true;
}
})
console.log(index)
this.list.splice(index, 1);
}
3. Query method:
Step analysis:
① Define a keyword and search it with keywords.
② Search for data containing keywords and compose these data into a new array.
③ Return a new array.
Code example:
<!-- 添加搜索的页面结构 -->
<label>搜索：
<input type="text" class="form-control" v-model="keywords">
</label>
<tbody>
<!-- 让每一条数据在以keywords为搜索前提的方法中循环 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{
{item.id}}</td>
<td v-text="item.name"></td>
<td>{
{item.time}}</td>
<td>
<a href="" @click.prevent="del(item.id)">狠心删除</a>
</td>
</tr>
</tbody>
search(keywords) {
// 创建一个新的数组
var newList = [];
this.list.forEach(item => {
if(item.name.indexOf(keywords) != -1) {
// 将包含keywords的数据添加到新的数组里。
newList.push(item)
}
});
return newList;
}
Page effect:
Today’s exercise is basically completed. I hope to help those who need help. Thank you for browsing.