zoukankan      html  css  js  c++  java
  • filter 的使用

    使用篇

    filter的使用案例
    .vue
    <template>
      <div :class="`icon-${filterLabelEn(label)}`">{{ filterLabel(label) }}</div>
       // 或不用导入直接用,这种方法需要在main.js 引入filter.js
       // main.js
       // import * as filters from '@/filters'
       // Object.keys(filters).forEach(key => {
       //    Vue.filter(key, filters[key])
       // })
      // <div>{{label | filterLabel}}</div>
    </template>
    <script>
    import { filterLabelEn, filterLabel } from '../../filter';
    export default {
    
      methods: {
        // 如果没有在main.js导入,可以作为一个方法来使用
        filterLabelEn,
        filterLabel,
        ...otherMethods
      }
    }
    </script>
    <style lang="scss" scoped>
    	.icon-xh {
    	  background: red;
    	}
    	.icon-xm {
    	  background: yellow;
    	}
    </style>
    
    .filter /index.js
    import HandleText from '../utils/handleText.js';
    export const filterLabel = value => {
      return HandleText.LABEL_ZH[parseInt(value)];
    };
    export const filterLabelEn = value => {
      return HandleText.LABEL_EN[parseInt(value)];
    };
    
    utils / handleText.js
    const HandleText = {
      LABEL_ZH: {
        1: '小明',
        2: '小红',
        3: '小李',
        4: '小张'
      },
      LABEL_EN: {
        1: 'xm',
        2: 'xh',
        3: 'xl',
        4: 'xz'
      }
    };
    export default HandleText;
    

      

  • 相关阅读:
    系统安全方案
    模态框的使用
    thinkphp修改分页为post方式
    手动配置apache、php
    Djang之ModelForm组件的简单使用
    连接池还是连接迟?
    金融量化
    luasocket编译安装遇到的坑
    numpy&pandas补充常用示例
    Matplotlib画正弦余弦曲线
  • 原文地址:https://www.cnblogs.com/TheYouth/p/13954193.html
Copyright © 2011-2022 走看看