第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4   <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7     <title>Document</title>
  8     <!--1.导入Vue的包-->
  9     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
 10     <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> -->
 11     <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
 12     <!-- 需要用到Jquery吗???不推荐在vue中使用Jquery -->
 13   </head>
 14
 15   <body>
 16       <div id="app">
 17
 18       <div class="panel panel-primary">
 19         <div class="panel-heading">
 20           <h3 class="panel-title">添加品牌</h3>
 21         </div>
 22         <div class="panel-body form-inline">
 23           <label>
 24             Id:
 25             <input type="text" class="form-control" v-model="id">
 26           </label>
 27
 28            <label>
 29             Name:
 30             <input type="text" class="form-control" v-model="name">
 31           </label>
 32           <!-- 在vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了 -->
 33           <input type="button" value="添加" class="btn btn-primary" @click="add()">
 34
 35         </div>
 36       </div>
 37
 38
 39
 40       <table class="table table-bordered table-hover table-striped">
 41         <thead>
 42           <tr>
 43             <th>Id</th>
 44             <th>Name</th>
 45             <th>Ctime</th>
 46             <th>Operation</th>
 47           </tr>
 48         </thead>
 49         <tbody>
 50           <tr v-for="item in list" :key="item.id">
 51             <td>{{item.id}}</td>
 52             <td v-text="item.name"></td>
 53             <td>{{item.ctime}}</td>
 54             <td>
 55               <a href="" @click.prevent="del(item.id)">删除</a>
 56             </td>
 57           </tr>
 58         </tbody>
 59         </table>
 60
 61
 62       </div>
 63
 64
 65       <script>
 66           //创建 Vue 实例,得到 ViewModel
 67           var vm =  new Vue({
 68               el:‘#app‘,
 69         data:{
 70           id:‘‘,
 71           name:‘‘,
 72           list:[
 73           {id:1,name:‘奔驰‘,ctime:new Date()},
 74           {id:2,name:‘宝马‘,ctime:new Date()}
 75           ]
 76         },
 77         methods:{
 78           add(){//添加的方法
 79             // console.log(‘ok‘)
 80             //分析:
 81             //1.获取到id 和name ,直接从data上面获取
 82             //2.组织出一个对象
 83             //3.把这个对下,调用数组的相关方法,添加到当前data上的list中
 84             //4.注意:在Vue中,已经实现了数据的双向绑定,每当我们修改了data中的数据,Vue会默认监听到数据的改动,自动把最新的数据,应用到页面上;
 85             //5.当我们意识到上面的第四部的时候,就证明大家已经入门Vue了,我们更多的是在进行VM中Model数据操作,同时,在操作Model数据的时候,指定的业务逻辑操作;
 86
 87             var car={id:this.id,name:this.name,ctime:new Date()}
 88             this.list.push(car)
 89             this.id=this.name=‘‘
 90           },
 91           del(id){//根据Id删除数据
 92             //分析:
 93             //1.如何根据Id,找到要删除这一项的索引
 94             //2.如果找到索引了,直接调用数组的splice方法
 95
 96            /* this.list.some((item,i)=>{
 97               if(item.id==id){
 98                 this.list.splice(i,1)
 99                 //在数组的some方法中,如果return true,就会立即终止这个数组的后续循环
100                 return true;
101               }
102             })*/
103
104            var index = this.list.findIndex(item=>{
105               if(item.id==id){
106                 return true;
107               }
108             })
109             // console.log(index)
110             this.list.splice(index,1)
111           }
112         }
113           });
114       </script>
115   </body>
116 </html>

原文地址:https://www.cnblogs.com/songsongblue/p/10988827.html

时间: 2024-11-05 13:31:56

第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除的相关文章

第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用

7 讲解v-cloak.v-text.v-html的基本使用 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <tit

第二章 Vue快速入门--8 v-bind指令的学习

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

第二章 Vue快速入门--12 事件修饰符的介绍

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

【第2章 Spring快速入门】2.2 WEB应用之HelloWorld

上一节:[第2章 Spring快速入门]2.1 Java应用之HelloWorld 本章节主要介绍在WEB开发过程中,Spring是怎么使用的?上一节中我们已经讲到在普通的Java Project中如何使用Spring容器了,那么在WEB开发中集成Spring时,Spring又应该与Web容器是如何集成使用的呢?本章会着重介绍WEB与Spring的集成使用,同时提供一个简单的Web Demo,供大家快速入手学习.本章主要讲解内容:1. Web开发中如何集成Spring:2. Spring MVC

Flask快速入门(20) — 多app应用

Flask快速入门(20) - 多app应用 之前一直是一个app,如果有多个app该怎么进行分发呢? from werkzeug.wsgi import DispatcherMiddleware from werkzeug.serving import run_simple from flask import Flask,current_app # 注册两个app app1 = Flask('app01') app2 = Flask('app02') @app1.route('/index')