品牌管理案例——添加新品牌 删除品牌 根据条件筛选品牌
生活随笔
收集整理的這篇文章主要介紹了
品牌管理案例——添加新品牌 删除品牌 根据条件筛选品牌
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
添加新品牌
// 分析：
? ? ? ? ? // 1. 獲取到 id 和 name ,直接從 data 上面獲取?
? ? ? ? ? // 2. 組織出一個對象
? ? ? ? ? // 3. 把這個對象，調用 數組的 相關方法，添加到 當前 data 上的 list 中
? ? ? ? ? // 4. 注意：在Vue中，已經實現了數據的雙向綁定，每當我們修改了 data 中的數據，Vue會默認監聽到數據的改動，自動把最新的數據，應用到頁面上；
? ? ? ? ? // 5. 在進行 VM中 Model 數據的操作，同時，在操作Model數據的時候，指定的業務邏輯操作；
刪除品牌
// 根據Id刪除數據
? ? ? ? ? // 分析：
? ? ? ? ? // 1. 如何根據Id，找到要刪除這一項的索引
? ? ? ? ? // 2. 如果找到索引了，直接調用 數組的 splice 方法
根據條件篩選品牌
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> </head><body><div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label>Id:<input type="text" class="form-control" v-model="id"></label><label>Name:<input type="text" class="form-control" v-model="name"></label><!-- 在Vue中，使用事件綁定機制，為元素指定處理函數的時候，如果加了小括號，就可以給函數傳參了 --><input type="button" value="添加" class="btn btn-primary" @click="add()"><label>搜索名稱關鍵字：<input type="text" class="form-control" v-model="keywords"></label></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><!-- 之前， v-for 中的數據，都是直接從 data 上的list中直接渲染過來的 --><!-- 現在， 我們自定義了一個 search 方法，同時，把 所有的關鍵字，通過傳參的形式，傳遞給了 search 方法 --><!-- 在 search 方法內部，通過 執行 for 循環， 把所有符合 搜索關鍵字的數據，保存到 一個新數組中，返回 --><tr v-for="item in search(keywords)" :key="item.id"><td>{{ item.id }}</td><td v-text="item.name"></td><td>{{ item.ctime }}</td><td><a href="" @click.prevent="del(item.id)">刪除</a></td></tr></tbody></table></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',keywords: '', // 搜索的關鍵字list: [{ id: 1, name: '奔馳', ctime: new Date() },{ id: 2, name: '寶馬', ctime: new Date() }]},methods: {add() { // 添加的方法var car = { id: this.id, name: this.name, ctime: new Date() }this.list.push(car)this.id = this.name = ''},del(id) { // 根據Id刪除數據var index = this.list.findIndex(item => {if (item.id == id) {return true;}})this.list.splice(index, 1)},search(keywords) { // 根據關鍵字，進行數據的搜索return this.list.filter(item => {if (item.name.includes(keywords)) {return item}})}}});</script> </body></html>
?
總結
以上是生活随笔為你收集整理的品牌管理案例——添加新品牌 删除品牌 根据条件筛选品牌的全部內容，希望文章能夠幫你解決所遇到的問題。
