vue局部和全局自定义过滤器和自定义指令的方法

最新推荐文章于 2022-05-24 09:52:11 发布

❍❏❐❑❒❖❘❙❚

最新推荐文章于 2022-05-24 09:52:11 发布

阅读量549

点赞数

分类专栏： vue 文章标签： vue指令 vue过滤器全局自定义

本文链接：https://blog.csdn.net/weixin_44636778/article/details/99715508

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如下是一个vue页面：

<template>
    <div id="methods"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created: {},
  methods: {},
  // 自定义私有指令
  directives: {
    fontWeight: {
      bind: function(el, binding) {
        el.style.fontWeight = binding.value;
      },
      inserted: function(el) {},
      updated: function(el) {}
    }
  },
  // 定义局部过滤器
  filters: {
    msgDateFormate: function(msg) {
      //将字符串转换成date类型
      var mt = new Date(msg);
      // 获取年份
      var y = mt.getFullYear();
      // 获取月份
      var m = mt.getMonth() + 1;
      // 获取天数
      var d = mt.getDate();
      // 拼接字符串
      return y + "-" + m + "-" + d;
    }
  },
  mounted: {}
};
</script>
<style lang="scss" scoped>
</style>

如下是全局定义，main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
//这里自定义的指令都是全局指令
// 定义全局的指令  v-focus
// 和样式相关的操作，一般都可以在 bind 中执行
// 和JS行为有关的操作，最好在 inserted 中去执行
Vue.directive("focus", {
  bind: function (el) {

  },
  inserted: function (el) {
    el.focus()
  },
  updated: function (el) {

  }
})
// 自定义一个颜色指令
Vue.directive("bg-color", {
  bind: function (el) {
    el.style.background = "red"
  },
  inserted: function (el) {

  },
  updated: function (el) {

  }
})
// 自定义一个颜色指令,可以传参的那种
Vue.directive("paramsColor", {
  bind: function (el, binding) {
    // el.style.background = "red"
    el.style.color = binding.value
    el.style.fontWeight = binding.value
  },
  inserted: function (el) {

  },
  updated: function (el) {

  }
})