vue2 + typescript2 自定义过滤器
自定义 过滤器 Vue2
2023-09-11 14:15:30 时间
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 { ... }
.
相关文章
- destoon7.0-8.0添加自定义字段报错INSERT INTO [pre]fields
- CSS3中引入多种自定义字体(font-face)
- 自定义控件之圆形颜色渐变进度条--SweepGradient
- 【转】WebService中使用自定义类的解决方法(5种)
- Python Django模板页面自定义过滤器实现md语法及字符串切割代码示例
- 为什么 SAP 电商云 Spartacus 产品明细页面的自定义 matcher 会重复被调用
- Android添加用户组及自定义App权限的方法
- 【项目实战】SpringMVC拦截器实战 - 自定义拦截器对Token鉴权
- 【项目实战】自定义设置Sonar的规则,要求DevOps工具链SonarQube只扫描指定模块
- springboot项目中使用shiro 自定义过滤器和token的方式___shiro使用token登录流程
- 【Android 内存优化】自定义组件长图组件 ( 自定义组件构造方法 )
- (十八)c#Winform自定义控件-提示框-HZHControls
- RobotFramewor自定义Python库
- Flask的jinja2模板中自定义过滤器的使用