Object.key遍历顺序错乱

const data={2023-12-15:3,2023-12-16:30,2023-12-18:37,2023-12-19:45,}
objectSort(obj) {//排序的函数

      var newkey = Object.keys(obj).sort();

      var newObj = {};

      for (var i = 0; i < newkey.length; i++) {

        newObj[newkey[i]] = obj[newkey[i]];

      }

      return newObj;

    }
console.log(objectSort(data))

在 Vue 2 项目中,如果使用 Typed.js 在展示多条不同类型的信息时遇到错乱显示的问题,你可以按照以下步骤来解决: 1. **安装依赖**: 首先,确保已经在项目中安装了 `@types/typed.js` 和 `typed.js` 库。如果你还没有安装,可以使用 npm 或 yarn 进行安装: ```bash npm install typed.js @types/typed.js # 或者 yarn add typed.js @types/typed.js ``` 2. **分隔组件化**: 将每条需要动态显示的信息封装成单独的组件,比如 `InfoItem.vue`,这样每个组件有自己的数据和样式管理,避免全局状态冲突。 3. **模板引用插槽**: 在主组件(例如 `App.vue`)中,创建一个用于显示 Typed.js 的容器,并通过 `v-for` 指令遍历不同类型的信息: ```html <template> <div> <div v-for="(info, index) in infos" :key="index"> <InfoItem :info="info" /> </div> </div> </template> ``` 4. **在 InfoItem 组件中使用 Typed.js**: 在 `InfoItem.vue` 中,注入 `Typed` 组件并调用它: ```vue <template> <div ref="typedInstance"></div> </template> <script> import { ref, onMounted } from 'vue'; import Typed from 'typed.js'; export default { setup(props) { const info = props.info; const typedRef = ref(null); onMounted(() => { if (typedRef.value) { typedRef.value.destroy(); } const typed = new Typed( this.$refs.typedInstance, Object.assign({ strings: info.strings, typeSpeed: info.typeSpeed, // 其他配置项... }, info.config) ); }); return { typedRef }; }, }; </script> ``` 5. **清除实例**: 当需要切换到另一条信息时,记得销毁当前的 Typed 实例并创建新的实例: ```javascript onBeforeUnmount(() => { typedRef.value && typedRef.value.destroy(); }) ``` 6. **处理错误和异常**: 如果有错误发生,可以在适当的地方添加错误处理,例如在 `mounted` 生命周期钩子里捕获错误并给出相应的提示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值