在Vue的模板中，我們常常使用變量來表示需要渲染的數據。這些變量可以通過Vue實例的data屬性進行定義，其值可以在模板中直接使用。在代碼中，我們可以通過{{ variable }}的方式來展示它們。

除了data屬性中定義的變量，我們還可以使用computed屬性中的變量。這些變量是基于data屬性中的值計算而來的，只有在值發生變化時才會重新計算。在模板中，可以像data屬性中的變量一樣直接使用。

// 例子1
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
// 例子2
{{ message }}
{{ reversedMessage }}

除了使用{{ variable }}的方式來展示變量，我們還可以使用v-bind指令。該指令的作用是將一個Vue實例中的變量綁定到模板中的標簽屬性上。例如：

// 例子
new Vue({
el: '#app',
data: {
src: 'http://example.com/image.png'
}
})

在以上代碼中，我們將Vue實例中的src變量綁定到img標簽的src屬性上。這樣，在Vue實例中修改src的值后，模板中的img標簽也會隨之改變。

在Vue的模板中，我們還可以使用指令來對某些標簽做出特殊處理。例如v-if指令表示當一個變量為真時，包含它的標簽將被渲染出來。v-for指令則表示對一個數組進行遍歷，并以遍歷的結果來生成相應的標簽。

// 例子1
new Vue({
el: '#app',
data: {
show: true
}
})
Hello Vue!
// 例子2
new Vue({
el: '#app',
data: {
items: ['foo', 'bar', 'baz']
}
})
{{ item }}

除了以上提到的指令，Vue模板中還有很多其他的指令，例如v-on用于綁定事件處理函數，v-model用于雙向數據綁定等等。

總之，在Vue的模板中，變量扮演著非常重要的角色。它們負責傳遞數據、循環渲染、控制條件渲染等等。通過靈活地運用Vue模板中的變量和指令，我們可以方便地構建出各種各樣的交互效果。