Vue,品牌列表案例(仅添加)

Posted wo1ow1ow1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue,品牌列表案例(仅添加)相关的知识,希望对你有一定的参考价值。

品牌列表案例(仅添加)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="../js/vue.js"></script>
 7         <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
 8     </head>
 9     <body>
10         <div id="app">
11             
12             
13             <div class="panel panel-primary">
14                 <div class="panel-heading">
15                     <h3 class="panel-title">添加品牌</h3>
16                 </div>
17                 <!-- form-inline 填在父元素里, 里面的子元素 占一行 -->
18                 <div class="panel-body form-inline">
19                     <label>
20                         Id:
21                         <input type="text" class="form-control" v-model="id">
22                     </label>
23                     
24                     <label>
25                         Name:
26                         <input type="text" class="form-control" v-model="name">
27                     </label>
28                 
29                     <!-- 在Vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了
30                       不加()也可以, 只不过不能传参-->
31                     <input type="button" class="btn btn-primary" value="添加" @click="add()"/>
32                 </div>
33             </div>
34             
35             
36             <table class="table table-bordered table-hover table-striped">
37                 <thead>
38                     <tr>
39                         <th>Id</th>
40                         <th>Name</th>
41                         <th>Ctime</th>
42                         <th>Operation</th>
43                     </tr>
44                 </thead>
45                 <tbody>
46                     <tr v-for="item in list" :key="item.id">
47                         <td> item.id </td>
48                         <td> item.name </td>
49                         <td> item.ctime </td>
50                         <td>
51                             <a href="#">删除</a>
52                         </td>
53                     </tr>
54                 </tbody>
55             </table>
56         </div>
57     </body>
58 </html>
59 <script>
60     var vm = new Vue(
61         el: #app,
62         data:
63             id:‘‘,
64             name:‘‘,
65             list:[
66                  id: 1, name: 奔驰, ctime: new Date() ,
67                  id: 2, name: 宝马, ctime: new Date() ,
68                  id: 3, name: 五菱宏光, ctime: new Date() 
69             ]
70         ,
71         methods:
72             add()
73                 // console.log("5555")
74                 //分析:
75                 //1. 获取到 id 和 name , 直接从data 上面获取
76                 //2. 组织出一个对象
77                 //3. 把这个对象, 调用 数组的 相关方法, 添加到data 的 list 中
78                 //4. 注意: 在Vue中, 已经实现了数据的双向绑定, 每当我们修改了 data 中的数据, Vue
79                 // 默认监听 数据的改动, 自动把最新的数据, 应用到页面上;
80                 
81                 // 5. 当我们意识到上面的第四步的时候,就证明大家已经入门Vue了, 我们更多的是在进行 VM中
82                 // Model 数据的操作, 同时, 在操作 Model数据的时候, 指定的业务逻辑操作
83             
84                 var car =  id: this.id, name: this.name, ctime: new Date() 
85                 this.list.push(car)
86                 
87                 // 将输入框清空, 否则输入的内容还在
88                 // this.id = this.name = ‘‘
89             
90         
91     )
92 </script>

 发现前端还是用VScode做方便, 自带好多插件, 以后有时间往VScode转一转, 不过小程序还是得用uni-app

 

2019-06-12 23:45:17

以上是关于Vue,品牌列表案例(仅添加)的主要内容,如果未能解决你的问题,请参考以下文章

Vue,品牌列表案例(仅添加,删除,搜索,全局过滤器,私有过滤器,日期填充)

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

vue复习大法之小案例品牌管理

vue-resource改造品牌列表案例

vue.js总结第二天

web前端利用vue.js实现品牌列表的添加,删除与筛选功能