在 Vue.js 中的对象属性之间切换

Question

问题

我想知道如何在Vue.js 中的对象属性 之间切换。

这是一个视觉示例：

var vm = new Vue({
    el: '#app',
    data:{
        myObject:{
            one: 'lorem',
            two: 'ipsum'
        }
    }
});

我希望能够在 html 的同一位置从 {{ myObject.one }} 更改为 {{ myObject.two }}，但我不知道是否可行。

我尝试了两种解决方案，但它们需要更多的代码和资源：

1) 对每个对象属性重复 html 并使用 v-show

2) 仅使用一个属性并通过 ajax

更改其内容

是否有不需要多次 ajax 调用或重复 html 的更好方法？

语境

我想制作一个多语言应用程序，点击一个按钮即可更改内容。代码如下所示：

    <div id="app">
        <h1>{{ title.en }}</h1>
    <div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                title:{
                    en: 'Hello',
                    es: 'Hola'
                }
            }
        });
    </script>

我想从 {{ title.en }} 切换到 {{ title.es }}

非常感谢

Answer 1

您可以将 lang 变量设置为 'en' 之类的值并使用 title[lang]。这与调用 title.en.

相同

new Vue({
  el: '#app',
  data: {
    lang: 'en',
    title: {
      en: 'Hello',
      es: 'Hola'
    }
  }
});

<div id="app">
  <ul>
    <li @click="lang = 'en'">English</li>
    <li @click="lang = 'es'">Spanish</li>
  </ul>
  <h1>{{ title[lang] }}</h1>
</div>

在 Vue.js 中的对象属性之间切换

Switch between object properties in Vue.js

javascript

ajax

jquery

vue.js