- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title>
- Document
- </title>
- <!--1. 导入 vue 的包 -->
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- <!-- <link rel="stylesheet" href="./lib/bootstrap.CSS"> -->
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
- <!-- 需要用到 Jquery 吗??? 不推荐在 vue 中使用 Jquery -->
- </head>
- <body>
- <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>
- <!-- 在 vue 中, 使用事件绑定机制, 为元素指定处理函数的时候, 如果加了小括号, 就可以给函数传参了 -->
- <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="" @click.prevent="del(item.id)">
- 删除
- </a>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <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. 当我们意识到上面的第四部的时候, 就证明大家已经入门 Vue 了, 我们更多的是在进行 VM 中 Model 数据操作, 同时, 在操作 Model 数据的时候, 指定的业务逻辑操作;
- var car = {
- id: this.id,
- name: this.name,
- ctime: new Date()
- }
- this.list.push(car) this.id = this.name = ''
- },
- 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;
- }
- })*/
- var index = this.list.findIndex(item = >{
- if (item.id == id) {
- return true;
- }
- })
- // console.log(index)
- this.list.splice(index, 1)
- }
- }
- });
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3085520.html