2023-02-10
温故知新
00

目录

说明
div动态ID并嵌入HTML
路由跳转和参数接收

说明

本文用于记录Vue一些函数、语法等技巧。主要基于Vue3

持续更新中。。。

div动态ID并嵌入HTML

使用nextTick函数

  • 父级vue,传入参数
html
<OblongItem :i="id" />
  • 子集vue,接收参数,并给予某个div动态id
html
<script setup lang="ts"> import { nextTick, onMounted, ref } from 'vue'; const id = ref<any>(); const props = defineProps(['i']); onMounted(() => { id.value = props.i; nextTick(() => { if (!id.value) { return; } let span = document.getElementById('span-' + id.value); if (span) { span.innerHTML = '<h1>ABC</h1>'; } }); }) </script> <template> <div> <span :id="'span-' + id"> </span> </div> </template>

路由跳转和参数接收

  • 手动路由跳转:在任意地方手动路由跳转页面
typescript
import router from '@/router'; // uri为路由地址 router.push(uri);
  • 参数接收:在被跳转页面接收跳转时传递过来的参数
typescript
import router from '@/router'; // 路由地址应为 /uri?i=xxx,其中i为参数名,xxx为参数值 const i = router.currentRoute.value.query.i;
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!