Javascript 在Vue.js中按类将文本附加到多个元素

我知道我要做的是直接修改dom（vue.js中的no-no），但是我能想到的唯一替代方法将创建更草率、更难维护的代码

问题 我使用的是vue-i18n，根据用户当前选择的语言，我希望将货币符号移动到price元素的前面或后面（我有许多元素在许多页面上显示price，事实上超过150页）

选择 我能想到的最好的替代方法是为每个需要交换的元素添加一个

：类
绑定，但要做到这一点，我必须在该站点的15个单独页面（+vuex logic）中添加大量
v-ifs
+
Mapgetter
+额外标记。我可能还必须在css中使用
：：before
和
：：after
为每种语言创建一个类，并在每种语言的
内容中添加符号：'

新考虑的解决方案
我认为在
app.vue
中使用
挂载的
钩子（将在
nextTick（）
上运行）然后调用函数在包含
priceItem
类的所有元素之前或之后附加货币符号可能会更干净

这样，我就不会让所有额外的标记和
v-if
s污染我的模板，尽管我会直接修改dom，尽管只是在渲染完所有内容之后

除了上面提到的方法之外，还有其他方法可以让我实现我想要的简单性，但仍然可以使用Vue类型的模式来实现吗

示例代码（app.vue）
编辑：
想一想，在
computed
道具中这可能会更好，这样每当用户更改语言时，我都可以重新分配符号。
对于寻求Vue快速解决方案的任何人，我使用此软件包来解决我的问题：


我在模板中使用了以下格式：

<vue-intl-numberformat
   locale="en-IN"
   format-style="currency"
   :currency="getCurrency"
   :number="item.price"
 />

然后，基于i18n中主动选择的lang，通过getter将正确的货币传递给它

（在我的vuex商店中）

这似乎是迄今为止最干净的解决方案。
对于任何寻求Vue快速解决方案的人，我使用此软件包来解决我的问题：


我在模板中使用了以下格式：

<vue-intl-numberformat
   locale="en-IN"
   format-style="currency"
   :currency="getCurrency"
   :number="item.price"
 />

然后，基于i18n中主动选择的lang，通过getter将正确的货币传递给它

（在我的vuex商店中）

这似乎是迄今为止最干净的解决方案。
您可以使一个计算属性侦听locale change事件并返回符号。我建议您使用vuex之类的集中式存储并使用MapGetter。如何使用格式化数字以显示正确的货币符号？那么你就不需要为你所有的价格手工添加货币符号了。@BallonUra你能告诉我更多的细节，你为什么会选择这个吗？我知道如何为这种情况设置Vuex，但要达到同样的效果，似乎需要编写更多的代码。更不用说在许多领域重复的功能了pages@Terry事实上，这是个好主意。我发现了一个vue软件包，它为我提供了一些简单的道具，可以扩展该功能。我认为这是实现我的目标的最简单的方法，而且我无法让上面的代码正常工作。您可以将该属性设置为侦听区域设置更改事件并返回符号的计算属性。我建议您使用vuex之类的集中式存储并使用MapGetter。如何使用格式化数字以显示正确的货币符号？那么你就不需要为你所有的价格手工添加货币符号了。@BallonUra你能告诉我更多的细节，你为什么会选择这个吗？我知道如何为这种情况设置Vuex，但要达到同样的效果，似乎需要编写更多的代码。更不用说在许多领域重复的功能了pages@Terry事实上，这是个好主意。我发现了一个vue软件包，它为我提供了一些简单的道具，可以扩展该功能。我认为这是实现我的目标的最简单的方法，而且无论如何我都无法让上面的代码正常工作。
computed: {
   ...mapGetters(['getCurrency'])
}

  getCurrency: (state) => {
    let activeLang = i18n.locale
    let currency = ''

    switch (activeLang) {
      case 'en':
        currency = 'USD'
        break
      case 'ko':
        currency = 'KRW'
        break
      case 'ja':
        currency = 'JPY'
        break
      case 'es' || 'fr' || 'it':
        currency = 'EUR'
        break
      case 'zh':
        currency = 'CNY'
        break
      case 'ru':
        currency = 'RUR'
        break
    }
    state.currency = currency
    return state.currency
  }