前端框架開始學習Vue(二)
阿新 • • 發佈：2019-01-05
1 根據關鍵字實現陣列的過濾
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css3.3.7/bootstrap.css"/> </head> <script src="vue.js"></script>View Code--篩選過濾<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 for=""> id: <input type="text" class="form-control" v-model="id"/> </label> <label for=""> name: <input type="text" v-model="name" /> </label> <!--在Vue中，使用事件繫結機制，為元素指定處理函式， 如果加了小括號，就可以傳參 --> <input type="button" value="新增" class="btn-primary" @click="add()"/> <input type="text" v-model="keyword"/> </div> </div> <table border="" cellspacing="" cellpadding="" class="table table-bordered table-hover table-striped"> <thead> <tr><th>id</th> <th>name</th> <th>time</th> <th>operation</th> </tr> </thead> <tbody> <!--之前 v-for中的資料，都是直接從data上的list中直接渲染的--> <!--現在，我們自定義serarch方法，通過傳參形式傳遞給serarch--> <!--在serarch方法內部通過執行for 迴圈，把符合的返回--> <tr v-for="item in serarch(keyword)" :key="item.id"> <td>{{item.id}}</td> <td v-text="item.name"></td> <td>{{item.ctime}}</td> <td><a href="" @click.prevent="dele(item.id)">刪除</a></td> </tr> </tbody> </table> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ id:'', name:'', keyword:"", list:[ {id:1,name:'灰濛濛1',ctime:new Date()}, {id:2,name:'寶',ctime:new Date()}, ] }, methods:{ add(){ this.list.push({id:this.id,name:this.name, ctime:new Date()}) this.id=this.name='' }, dele(id){//根據id 找到並刪除資料 // this.list.some((item,i)=>{ // this.list.splice(i,1) // if(item.id==id){return true} // } // ) var index= this.list.findIndex(item=>{ if(item.id==id){ return true } }) this.list.splice(index,1) }, serarch(keyword){ // var newList=[] // this.list.forEach(item=>{ // if(item.name.indexOf(keyword)!=-1){ // newList.push(item) // } // // }) // return newList // 注意：forEach some filter findIndex這些都屬於陣列的新方法 // 都會對陣列的每次進行遍歷執行相關的操作 return this.list.filter(item=>{ // 注意：Es6中，為字串提供了一個新方法，叫做 // String:prototype.includes('要包含的字串') // 如果包含，則返回 true,反之 if(item.name.includes(keyword)){ return item } }) } } }) </script> </body> </html>
2 全域性過濾器使用
// 過濾器定義語法 // Vue.filter('過濾器名',function(){}) // 過濾器中的function，第一個引數，已經被規定死了， // 永遠都是過濾器管道符傳遞過來的資料 Vue.filter('過濾器名',function(data){ return data+'123' }) </script> </body> </html> <!--過濾器呼叫時候的格式 {{name | 過濾器名}}-->View Code--過濾器定義
<body> <div id="app"> <p>{{msg | msgFormat('瘋狂')}}</p> </div> <script type="text/javascript"> Vue.filter('msgFormat',function(data,arg){ // 字串的 replace 方法，第一個引數，除了可寫一個字元之外， // 還可以定義一個正則 return data.replace(/單純/g,arg) }) var vm=new Vue({ el:"#app", data:{ msg:'曾經，我也是一個單純的少年,單純的我也一直很單純' } }) </script> </body>View Code--傳參過濾器定義
自定義私有過濾器
呼叫的時候，採用的是就近原則，如果私有過濾器和全域性過濾器名稱一致，
優先呼叫私有過濾器
3 Es6 方法 padStart 方法
var m =(dt.getMonth()+1).toString().padStart(2,'0')
4 按鍵修飾符（按鍵事件）
參考官方文件 https://cn.vuejs.org/v2/guide/events#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
也可以輸入鍵碼值 @keyup.113="add"