Vue学习--品牌列表案例添加功能、删除功能

Leefs 2019-11-11 AM 2885℃ 2条

# Vue学习--品牌列表案例添加功能

### 前言

学习了Vue的一些基本指令，本篇将用一个小案例进行一下练习：**实现品牌列表案例中的添加功能**

**准备工作：**

> vue-2.6.0.js
>
> bootstrap-3.3.7.css

### 实现添加功能

##### 1. HTML代码结构

```html
<div id="app">
    
        
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>

<label>
                    name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                
                <input type="button" value="添加" class="btn btn-primary" @click="add()">
            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</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.ctime}}</td>
                    <td>
                        <a href="">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
```

##### 2. Vue中实例代码

```js
<script>
    //创建VUE实例，得到 ViewModel
    var vm = new Vue({
        el:"#app",
        data:{
            id:'',
            name:'',
            list:[
                {id:1,name:'奔驰',ctime:new Date()},
                {id:2,name:'宝马',ctime:new Date()}
            ]
        },
        methods:{
            add(){//添加的方法
                console.log("OK");
                //分析
                // 1. 获取到 id 和 name,直接从data上面获取
                // 2. 组织出一个对象
                // 3. 把这个对象，调用数组的 相关方法，添加到 当前 data 上的 list中
                // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data中的数据 Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；

// 5. 我们更多的是在进行VM中Model数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作

var car = {id:this.id,name:this.name,ctime:new Date()} 
                this.list.push(car)
                this.id=this.name=''
            }
        }
    });
</script>
```

### 实现删除功能

##### 1. HTML代码

```html
 <a href="" @click.prevent="del(item.id)">删除</a>
```

##### 2. Vue中实例代码

```js
del(id){//根据Id删除数据
    //分析：
    // 1. 如何根据Id,找到要删除这一项的索引
    // 2. 如果找到索引了，直接调用 数组的 splice 方法
    this.list.some((item,i)=>{
        if(item.id == id){
            this.list.splice(i,1)
            //在 数组的 some 方法中，如果 return true,就会立即终止这个数组的后续循环
            return true;
        }
    })
}
```

*附：Vue入门学习案例和总结都来自于网络中VUE视频教程*

标签: 前端, VUE

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.lilinchao.com/archives/153.html

上一篇【转载】Ajax工作原理和实现步骤

下一篇记一次Jquery的基本操作

评论啦~

已有 2 条评论

孤独这杯酒

都双十一了，还在这里敲代码
回复 2019-11-11 21:09
1. Leefs 博主
  @孤独这杯酒
  
  对于一个单身汪来说，双十一和双十二没多大区别
  回复 2019-11-11 22:36

Vue学习--品牌列表案例添加功能、删除功能

评论啦~

已有 2 条评论

栏目分类

标签云

友情链接申请

Vue学习--品牌列表案例添加功能、删除功能

 评论啦~

已有 2 条评论

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请