如何在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 。