赞
踩
Vue-cli 项目中的 mixin 是一种强大的功能,允许你在多个组件之间共享可复用的方法和/或选项。Mixin 本质上是一个对象,它可以包含组件选项中的任意选项,如数据、方法、生命周期钩子等。当组件使用 mixin 时,所有 mixin 选项将被“混入”该组件本身的选项中。
首先定义一个,在根目录下创建一个mixin文件夹,并创建js文件。
文件中写如下内容,可根据实际情况定义:
// mixin混入:保存公共数据:可以定义多个mixin // 导出mixin export const mixin1={ data(){ return{ index:0 } }, methods:{ clickli(i){ this.arr[this.index].state=false; this.index=i; this.arr[i].state=true; } } }
如何使用mixin:
<template>
<div>
<!-- 组件模板 -->
</div>
</template>
<script>
// 引入 mixin
import myMixin from './myMixin';
export default {
mixins: [myMixin],
// 组件的其它选项...
}
</script>
在 Vue.js 中,过滤器(filters)是一种在表达式中使用的方式,用于将文本格式化为不同的形式。然而,在 Vue 2.x 中,过滤器主要用于文本插值表达式中,比如 {{ message | capitalize }}。不过,从 Vue 3.x 开始,官方已经移除了对过滤器的支持,官方推荐的做法是使用计算属性(computed properties)或方法(methods)来替代过滤器的功能。
搭建filter文件结构
其中index.js中,配置在程序中用到的过滤器,如下,分别配置了三个过滤器,分别为:sub,subtime,subnum。
const sub = (value, num = 5) => { if (value.length >= num) { return value.substring(0, num) + "......"; } else { return value; } } const subtime = (value) => { let m = parseInt(value / 1000 / 60);//分 let s = parseInt(value / 1000 % 60);//秒 if (s < 10) { s = "0" + s; } if (m < 10) { m = "0" + m; } return m + "分" + s + "秒" } const subnum = (value) => { if (value <= 10000) { return value; } if (value > 10000 && value <= 100000) { return String(value / 10000).substring(0, 3) + "W" } if (value > 100000) { return "10W+"; } } export { sub , subtime,subnum}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。