将 dir rtl 属性添加到 vuejs 中的 html 标记答案

【问题标题】：Add dir rtl attribute to html tag in vuejs将 dir rtl 属性添加到 vuejs 中的 html 标记
【发布时间】：2019-12-14 21:40:35
【问题描述】：

我使用 vue create 命令创建了一个 vue 项目。我想将属性 dir="rtl" 添加到我的 html 标记中。在Nuxt.js 我们这样做：

<template>
    <div>Main View</div>
</template>
<script>
export default {
    name: 'app',
    head: {
        htmlAttrs: {
          lang: 'fa',
          dir: 'rtl'
        },
    }
</script>

但是在 Vuejs 中这是行不通的。我该怎么做？

【问题讨论】：

Vue 应用程序没有等价物。你的目录结构被 Webpack 扁平化，一切都在生成的 .js 文件中发送到客户端。你想用 vue 应用程序中的 dir 属性来实现什么？
你可以将它指定给根元素或者像我一样here
@bbsimonbb 我想用 vue 创建一个波斯语应用程序，需要将 lang="fa" 设置为文档 html 标签。我也想在 rtl 模式下设置所有元素（因为波斯语是 rtl 语言）
:-) google "vue i18n"，或者查看 vuei18n 插件。那里有解决方案，但据我所知，它们不涉及 dir 属性。

标签： javascript vue.js vuejs2

【解决方案1】：

尝试将此配置放入Vue实例的created钩子中，如下所示：

new Vue({
    el:"#app",
     ...

    created(){
       let htmlEl=document.querySelector("html");
        htmlEl.setAttribute('dir','rtl');
        htmlEl.setAttribute('lang','fa');
      }
   })

【讨论】：