品牌管理案例——添加新品牌 删除品牌 根据条件筛选品牌
生活随笔
收集整理的這篇文章主要介紹了
品牌管理案例——添加新品牌 删除品牌 根据条件筛选品牌
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
添加新品牌
// 分析：
? ? ? ? ? // 1. 獲取到 id 和 name ,直接從 data 上面獲取?
? ? ? ? ? // 2. 組織出一個對象
? ? ? ? ? // 3. 把這個對象，調(diào)用 數(shù)組的 相關(guān)方法，添加到 當(dāng)前 data 上的 list 中
? ? ? ? ? // 4. 注意：在Vue中，已經(jīng)實現(xiàn)了數(shù)據(jù)的雙向綁定，每當(dāng)我們修改了 data 中的數(shù)據(jù)，Vue會默認(rèn)監(jiān)聽到數(shù)據(jù)的改動，自動把最新的數(shù)據(jù)，應(yīng)用到頁面上；
? ? ? ? ? // 5. 在進(jìn)行 VM中 Model 數(shù)據(jù)的操作，同時，在操作Model數(shù)據(jù)的時候，指定的業(yè)務(wù)邏輯操作；
刪除品牌
// 根據(jù)Id刪除數(shù)據(jù)
? ? ? ? ? // 分析：
? ? ? ? ? // 1. 如何根據(jù)Id，找到要刪除這一項的索引
? ? ? ? ? // 2. 如果找到索引了，直接調(diào)用 數(shù)組的 splice 方法
根據(jù)條件篩選品牌
<!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中，使用事件綁定機(jī)制，為元素指定處理函數(shù)的時候，如果加了小括號，就可以給函數(shù)傳參了 --><input type="button" value="添加" class="btn btn-primary" @click="add()"><label>搜索名稱關(guān)鍵字：<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 中的數(shù)據(jù)，都是直接從 data 上的list中直接渲染過來的 --><!-- 現(xiàn)在， 我們自定義了一個 search 方法，同時，把 所有的關(guān)鍵字，通過傳參的形式，傳遞給了 search 方法 --><!-- 在 search 方法內(nèi)部，通過 執(zhí)行 for 循環(huán)， 把所有符合 搜索關(guān)鍵字的數(shù)據(jù)，保存到 一個新數(shù)組中，返回 --><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>// 創(chuàng)建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',keywords: '', // 搜索的關(guān)鍵字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) { // 根據(jù)Id刪除數(shù)據(jù)var index = this.list.findIndex(item => {if (item.id == id) {return true;}})this.list.splice(index, 1)},search(keywords) { // 根據(jù)關(guān)鍵字，進(jìn)行數(shù)據(jù)的搜索return this.list.filter(item => {if (item.name.includes(keywords)) {return item}})}}});</script> </body></html>
?
總結(jié)
以上是生活随笔為你收集整理的品牌管理案例——添加新品牌 删除品牌 根据条件筛选品牌的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
