vue2 + typescript2 自定义过滤器

Posted 每天都要进步一点点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2 + typescript2 自定义过滤器相关的知识,希望对你有一定的参考价值。

1.定义一个过滤器

// color-directive.ts

import { DirectiveOptions } from ‘vue‘

const directive: DirectiveOptions = {
    inserted(el, node) {
        /**
         * Using value:
         * v-colorDirective={color: ‘red‘, backgroundColor: ‘blue‘}
         */
        if (node.value) {
            el.style.backgroundColor = node.value.backgroundColor;
            el.style.color = node.value.color;
        }

        /**Using modifiers:
         * v-colorDirective.color
         * v-colorDirective.backgroundColor
         */
        if (node.modifiers.color){
            el.style.color = node.value;
        }

        if (node.modifiers.backgroundColor) {
            el.style.backgroundColor = node.value;
        }
    }
};

export default directive;

2.使用

<template>
  <div class="hello">
    <h1 v-colorDirective="{color: ‘red‘, backgroundColor: ‘blue‘}">{{ message }}</h1>
    <button @click="clicked">Click</button>
    <router-link to="/hello-ts">Hello Ts</router-link>
  </div>
</template>

<script lang="ts">
import Vue from ‘vue‘
import Component from ‘vue-class-component‘
import colorDirective from ‘../color-directive‘;

@Component({
  directives: {
    colorDirective
  }
})
export default class Hello extends Vue {
 ....   
}

 

<template>
    <div>
        <h3 v-colorDirective.color="‘green‘">HelloTs</h3>
        <router-link to="/">Hello</router-link>
    </div>
</template>
<script lang="ts">

import Vue from ‘vue‘
import Component from ‘vue-class-component‘
import colorDirective from ‘../color-directive‘;

@Component({
    directives: {
        colorDirective
    }
})
export default class HelloTs extends Vue {
  ...
}

.

以上是关于vue2 + typescript2 自定义过滤器的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 自定义时间过滤器

Vue2.0笔记——{{}}模板与自定义过滤器

VUE2.x之过滤器的基本用法

vue2中的过滤器

TypeScript 2.1 自定义元素

Vue2自定义指令改变DOM值后未刷新data中绑定属性的值