品牌列表案例（仅添加）
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