1、過濾器

//在html下的程式碼
<div id="app">
    <div>
        <input type="text" v-model="len" />mm
        {{len | meter}}
    </div>
    <div></div>
</div>

//在Vue.js下的程式碼
Vue.filter('meter',function (val,unit) {
     val = val || 0;
     unit = unit || 'm';
    return val/1000 + unit;
});

var app = new Vue({
   el:'#app',
    data:{
       len:10,
    }
});
 

2、自定義指令—基礎配置

//在html中相關程式碼
<div id="app">
    <div class="card" v-pin="true">how are you ? i am fine ,thank you , and you?</div>
    <div class="card" v-pin="false">how are you ? i am fine ,thank you , and you?</div>

//在Vue.js中的相關程式碼
Vue.directive('pin',function (el,binding) {
    var pinned = binding.value;
    if (pinned){
        el.style.position = 'fixed';
        el.style.top = '10px';
        el.style.left = '10px';
    }
});


var app = new Vue({
   el:'#app',
});
 

如果我們給第一個div中放入一個按鈕來控制它的定位效果，那麼寫法如下

<div id="app">
    <div class="card" v-pin="card1.pinned">
        <button @click="card1.pinned = !card1.pinned">定位/取消</button>
        how are you ? i am fine ,thank you , and you?
    </div>
    <div class="card" v-pin="card2.pinned">how are you ? i am fine ,thank you , and you?</div>
</div>
 

Vue.directive('pin',function (el,binding) {
    var pinned = binding.value;
    if (pinned){
        el.style.position = 'fixed';
        el.style.top = '10px';
        el.style.left = '10px';
    }else{
        el.style.position = 'static';
    }
});


var app = new Vue({
   el:'#app',
    data:{
       card1:{
           pinned:false,
       },
       card2:{
           pinned:false,
       },
    }
});

3、配置傳參及修飾符

<div id="app">
    <div class="card" v-pin.bottom.right="card1.pinned">
        <button @click="card1.pinned = !card1.pinned">定位/取消</button>
        how are you ? i am fine ,thank you , and you?
    </div>
    <div class="card" v-pin="card2.pinned">how are you ? i am fine ,thank you , and you?</div>
</div>

Vue.directive('pin',function (el,binding) {
    var pinned = binding.value;
    var position = binding.modifiers;
    if (pinned){
        el.style.position = 'fixed';
        for (var key in position)
        {
            if (position[key]){
                el.style[key]='10px';
            }
        }
    }else{
        el.style.position = 'static';
    }
});


var app = new Vue({
   el:'#app',
    data:{
       card1:{
           pinned:false,
       },
       card2:{
           pinned:false,
       },
    }
});