Vue,品牌列表案例（仅添加）

迈不过友情╰ 2021-11-16 06:56 258阅读 0赞

# 品牌列表案例（仅添加） #

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                 
    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                     
    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

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11013543.html