[TOC]
## 1.過濾器 filter
> 過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示
> 過濾器函數總接收表達式的值 (之前的操作鏈的結果) 作為第一個參數。在給函數添加參數時，會默認往后排
全局過濾器：
~~~
Vue.filter('filterName', function (value) {
console.log(value);
})
new Vue({
// ...
})
~~~
組件過濾器：
~~~
filters: {
filterName: function (value) {
console.log(value);
}
}
~~~
eg:
~~~
<template>
<div>
<input type="text" v-model="lenth">mm
{{ lenth | meter('mX') }}
</div>
</template>
<script>
export default {
name: "FilterTest",
props: {},
data() {
return {
lenth: 1
};
},
filters: {
meter: function(val, unit) {
val = val || 0;
unit = unit || "m";
return (val / 1000).toFixed(2) + unit;
}
}
};
</script>
<style></style>
~~~
## 2.自定義指令
如果說組件時游戲中的英雄，那么指令就像是英雄的技能，而英雄的技能是可以相似的
在本例中可以看到自定義組件pin的參數binding 在控制臺的內容大致是這樣的：
~~~
{
arg: " true",
def: {},
expression: " ",
modifiers: {bottom: true,left: true},
name: " ",
rawName: " ",
value: false
}
~~~
~~~
<template>
<div>
<div v-pin:true.bottom.left="card.pinned" class="pinned">
<button @click="card.pinned =! card.pinned">釘起來/取消</button>哇哦，短劍重鑄之日，騎士歸來之時
</div>
</div>
</template>
<script>
export default {
name: 'dirTest',
data(){
return {
card: {pinned: false}
};
},
props:{},
methods:{},
directives: {
pin: function(element,binding){
console.log(element)
console.log(binding)
var pinned = binding.value;
var position = binding.modifiers;
var warning = binding.arg;
if(pinned) {
element.style.position = 'fixed';
for(var key in position) {
if(position[key]) {
element.style[key] = '10px'
}
}
if(warning === 'true') {
element.style.backgroundColor = '#ff2d51';
}
} else {
element.style.position = 'static'
}
}
}
}
</script>
<style>
.pinned{
padding: 10px;
background: #fafafa;
border-radius: 5px;
}
</style>
~~~
