在前端開發中，經常需要將多個字符串拼接成一個變量，并在頁面上顯示。在Vue中，我們可以使用v-bind指令或者{{ }}語法來實現這個目標。

使用v-bind指令的方法為：在Vue實例中定義一個變量，然后在模板中使用v-bind指令將多個字符串拼接成該變量。

let app = new Vue({
el: '#app',
data: {
str1: 'Vue',
str2: '是',
str3: '一款',
str4: '輕量級',
str5: '前端框架。'
}
});

在模板中，我們可以使用v-bind指令將這些字符串拼接成一個變量，再將該變量賦值給HTML元素的屬性。

<div id="app">
<p v-bind:title="str1 + str2 + str3 + str4 + str5">{{ str1 + str2 + str3 + str4 + str5 }}</p>
</div>

在上面的模板中，我們將str1到str5這五個字符串拼接成了一個變量，然后將該變量賦值給了p元素的title屬性和內容。通過v-bind指令，我們可以將多個字符串拼接起來展示在頁面上。

請注意，在Vue中，我們還可以使用{{ }}語法來拼接字符串。使用{{ }}語法的方法為：在Vue實例中定義一個方法，然后在模板中使用{{ }}將多個字符串拼接成該方法的返回值。

let app = new Vue({
el: '#app',
data: {
str1: 'Vue',
str2: '是',
str3: '一款',
str4: '輕量級',
str5: '前端框架。'
},
methods: {
getString: function () {
return this.str1 + this.str2 + this.str3 + this.str4 + this.str5;
}
}
});

在模板中，我們可以使用{{ }}將這些字符串拼接成一個方法的返回值，再將該返回值賦值給HTML元素的內容。

<div id="app">
<p>{{ getString() }}</p>
</div>

在上面的模板中，我們將str1到str5這五個字符串拼接成了一個方法，并通過{{ }}語法展示在了頁面上。通過這種方式，我們還可以將邏輯控制與模板分離，提高代碼的可讀性。

綜上所述，Vue提供了兩種方便的方法讓我們將多個字符串拼接成一個變量，從而在頁面上展示。在開發中，我們可以根據具體情況選擇不同的方法來實現該功能，以便更好地滿足需求。