首页 > 文章 > Vue,品牌列表案例(仅添加)

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

时间:2019-06-13 00:14:43阅读(76)
联系我们 - 留言反馈
© 2017 版权所有 鲁ICP备17052893号