vue3 i18n 的用法请教

https://kazupon.github.io/vue-i18n/zh/introduction.html 官网

     <div v-html="treeHtmlStr">
            
            </div>

官方文档 html的插值写法是这样：     <li> {{$t(arr[i].title)}}</li>  //有效


const treeArr = [ ...  ]   // tree的数据
const treeHtmlStr =ref('')   // 插入 v-html
onmount(()=>{
    treeHtmlStr .value = treeShow(treeArr)
})

// Html 中会写了,但是在js中 $t 不识别,怎么解
 function treeShow(arr:any){
    let str='<ul>'
    for (let i=0,e=arr.length;i<e;i++){
  
      str += `<li>$t(${arr[i].title})</li>`    //这块怎么写 ，这样写不行 $t成字符串了
     
      str += `<li>${$t(arr[i].title})}</li>` /  /这块怎么写 ，这样写也不行 $t 不识别,报错
    }
    str = str + '</ul>'
    return str
  }

i18n什么版本的？以下是i18n v9版本示例



<div id="app">
    <p>{{ $t("message.hello") }}</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>
<script>

    const messages = {
        en: {
            message: {
                hello: 'hello world'
            }
        },
        ja: {
            message: {
                hello: 'こんにちは、世界'
            }
        }
    }

    const i18n = VueI18n.createI18n({
        locale: 'ja',
        fallbackLocale: 'en',
        messages,
    })

    let $t;
    const App = {
        mounted() {
            $t = [...i18n.__instances][0][1].t;
            alert($t("message.hello") + '\n\n' + $t("message.hello", 'en'))
        }
    }

    const app = Vue.createApp(App)
    app.use(i18n);

    app.mount('#app');
</script>

str += `<li>{{$t("${arr[i].title}")}}</li>`

或者在js中通过this或vue对象变量调用$t()方法

str += `<li>${this.$t(arr[i].title)}</li>`

1.如果存在this 对象。 str += <li>${this.$t(arr[i].title})}</li>
2.如果没有this 对象。 import { t } from 'i18n' str += <li>${t(arr[i].title})}</li>

$t 是全局的变量只能作于 html 中。 js 文件中没有$t对象一般我们会绑定到全局的this 中或者单独引过来

str += `<li v-html="$t(${arr[i].title})"></li>`



<template>
  <div class="nav-bar">
    <li> {{$t("arr[0].title")}}</li>
    <div v-html="treeHtmlStr"></div>
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";

export default {
  name: "NavBar",
  setup(props) {
    // 局部 使用i18n
    const { t, locale } = useI18n();
    const treeArr = [1, 2, 3]; // tree的数据
    const treeHtmlStr = ref(null); // 插入 v-html
    onMounted(() => {
      treeHtmlStr.value = treeShow(treeArr, t);
    });
    // // Html 中会写了,但是在js中 $t 不识别,怎么解
    let treeShow = (arr) => {
      let str = "<ul>";
      for (let i = 0, e = arr.length; i < e; i++) {
        //   str += `<li>$t(${arr[i].title})</li>`    //这块怎么写 ，这样写不行 $t成字符串了
        //   str += `<li>${$t(arr[i].title})}</li>` //这块怎么写 ，这样写也不行 $t 不识别,报错
        str += `<li>${t("arr[" + i + "].title")}</li>`;
      }
      str = str + "</ul>";
      return str;
    };

    return {
      treeHtmlStr,
    };
  },
};
</script>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

vue3 i18n 的 用法请教

vue3 i18n 的用法请教