在Vue.js對象屬性之間切換

我想知道對象屬性之間在Vue.js.哪能切換

這裏是一個可視化例子：

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

我希望能夠改變從{{ myObject.one }}到{{ myObject.two }}，在HTML中的同一個地方，但我不知道這是否是可能的。

我已經嘗試了兩種解決方案，但他們需要更多的代碼和資源：

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 }}

非常感謝您

來源

2015-12-22 rogervila

你不需要i18n嗎？ https://github.com/kazupon/vue-i18n – rmagnum2002

謝謝你的插件@ rmagnum2002！問題是數據結構必須是這個標題{en：'hello'，es：'hola'}而不是es：{title：'hola'}，en：{title：'hello'} – rogervila

您可以將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>

來源

2015-12-22 18:59:02

謝謝你非常，這正是我所期待的。 – rogervila

在Vue.js對象屬性之間切換

回答

相關問題