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 自定义过滤器的主要内容,如果未能解决你的问题,请参考以下文章