vue学习：自定义过滤器和自定义指令

Posted 2020-10-05

#自定义指令

自定义指令的参数有：

• el: 指令所绑定的元素，可以用来直接操作 DOM 。
• binding: 一个对象，包含以下属性：
  • name: 指令名，不包括 v- 前缀。
  • value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

 下面写了一个自定义指令，作用是固定定位，修饰符表示位置，带参数的有黄色背景。

<template>
  <div class="b">
    <div class="box" v-pin:yellow.left.top="true">我是自定义指令，背景色为黄色，固定在左上角<br><br></div>
    <div class="box" v-pin.left.bottom="true">我是自定义指令，固定在左下角<br><br></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      length: 10
    }
  },
  directives:{
    pin (el,binding){
      console.log(el,binding);
      // 指令的值
      var pinned = binding.value;
      // 修饰符
      var position = binding.modifiers;
      // 参数
      var yellow = binding.arg;
      console.log(yellow)
      if( binding.value ){
        el.style.position = "fixed";
        for( var key in position){
          if(position[key]){
            el.style[key] = "10px";
          }
        }

        if( yellow ){
          el.style.background = "yellow";
        }

      }else{
        el.style.position = "static";
      }
    }
  }
  
}
</script>

binding打印出来是：

页面效果是：

 

#自定义过滤器

将10m转化为 毫米单位：

<template>
  <div class="b">
    <div><span>{{ length }} m</span>等价于：<span> {{ length | meter("mm") }}</span></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      length: 10
    }
  },
  filters:{
    // val 为要转化的值，unit为参数
    meter (val,unit){
      if( unit === "mm")
        return val *1000 + "mm"
    }
  }
  
}
</script>

效果为：