2018年11月09日 关于Vue的过滤器 and 自定义指令—基础配置 and 配置传参及修饰符

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,
       },
    }
});