如何在Vue js中連接字符串和變量

Question

如何使用 Vuejs 將字符串與兩個添加變量連接起來。 我使用了下面的代碼，但字符串我無法連接到變量。 請檢查並解決我的問題。

<div id = "vue_det">
    <h1>Firstname : {{firstname}}</h1>
    <h1>Lastname : {{lastname}}</h1>
    <h1>{{test()}}</h1>
    </div>
    <script type = "text/javascript" src = "js/vue_instance.js"></script>
    <script>

     var  vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : 10,
      lastname  : 20,

   },
   methods: {
      test : function() {

         return "result"+ this.firstname+this.lastname;
      }
   }
})
     </script>
   </body>

Answer 1

你不想要一個方法，你想要一個計算的。

computed: {
      test : function() {

         return "result = "+ (this.firstname+this.lastname);
      }
   }

然后使用它，就好像它不是一種方法，而是另一個屬性

{{test}}

有關計算屬性的綜合文檔，請參閱https://v2.vuejs.org/v2/guide/computed.html 。