Vue.js 筆記(二) 模板語法
阿新 • • 發佈:2018-11-03
指令
1. 以 v- 開頭 常見有:v-bind(資料單向輸出),v-html(顯示html),v-model(資料雙向繫結),v-if(條件,是否插入元素),v-on(事件)
2. 引數,指令後加冒號,如:v-bind:class='class1' 將DOM 元素class 屬性與表示式 class1 的值繫結
縮寫
1. v-bind:---------: 如:v-bind:href='url' ---------:href='url'
2.v-on:[email protected]
事件修飾符
例: v-on:click.stop='dosth' (阻止事件冒泡) , v-on:keyup.enter (按回車鍵鬆開時)
過濾器
常用:
名稱 | 說明 |
---|---|
uppercase | 全部轉為大寫 |
lowercase | 全部轉為小寫 |
currency | 數字轉為貨幣格式,第一個引數為貨幣符,第二個引數為保留小數位數 |
debounce | 延遲執行,單位毫秒,限在@中使用 |
limitBy | 限在v-for中使用,第一個引數 讀取數量,第二個引數 開始位置 |
orderBy | 限制:需在v-for(即陣列)裡面使用 ,第一個引數 搜尋字元,第二個引數 升(>=0)降序(<0) |
filterBy | 限制:需在v-for(即陣列)裡面使用 格式: v-for="item in arr | filterBy 'l' in 'name' 'dada' " |
自定義過濾器:
let v=new Vue({
el:'el1',
methods:{},
filters:{
filter1:function(val1,val2){ //第一個引數為呼叫者本身,後面可加多個其他引數
//.....
return '';
}
}
});