vue自定义指令2

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

记上文vue自定义指令1我们了解到了自定义指令的基本概念，以及从零到一去描述自定义指令的创建过程。那么，我们了解到自定义指令的基本概念和创建过程后，本文 则来讲解关于自定义指令是如何进行传参的以及自定义过滤器的作用和语法，从而更深入的去了解有关自定义指令这部分的学习，从而在开发过程能更好的使用。

指令传参

指令=''值

定义方式：

// 再创建一个指令来实现文本框的用户自定义设置
Vue.directive('setcolor',{
    // binding:通过它可以获取当前指令的值
    inserted(el,binding){
        // el.style.color='red'
        console.log(binding)
        el.style.color = binding.value
    }
})

如果获取用户传递的数据

binding:它就可以获取用户在调用指令时所传递的参数：binding.value

自定义过滤器

作用：过滤：对源数据进行处理，返回你需要的目标数据

过滤器的本质就是一个函数

• 定义位置：vm实例外和前

• 定义语法

  Vue.filter(过滤器的名称，函数)
  1.函数默认有一个参数，管道符前面的数据。就是调用过滤器的源数据
  2.函数一般会返回数据
  

• 调用过滤器：管道符 | 过滤器

• 如果需要自定义传参：管道符 | 过滤器(参数)，就算传递了自定义参数，也不会影响默认参数的传递和接收

   // 定义时间格式化过滤器
  // 就算传递了自定义参数,也不会影响默认参数的接收,默认参数还是在第一个
  Vue.filter('timeformat',(time,sep) => {
      console.log(time,sep)
      time = new Date(time)
      var year = time.getFullYear()
      var month = time.getMonth() + 1
      var day = time.getDate()
      var hour = time.getHours()
      var minute = time.getMinutes()
      var second = time.getSeconds()
      return year+sep+month+sep+day+' '+hour+":"+minute+":"+second
  })
  ​
  ---------------------
  <td>{{value.time|timeformat('/')}}</td>