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？

CONTEXT

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

    <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中切换对象属性

1 个答案: