如何使用JS變量呢？Vue中直接使用Vue實(shí)例中的data屬性中的變量即可，如下所示：

new Vue({
data: {
message: 'Hello Vue.js!'
}
})

如上所示，我們可以直接在Vue實(shí)例中定義一個(gè)data對(duì)象，其中包含我們想要在視圖中渲染的數(shù)據(jù)，這些數(shù)據(jù)可以通過(guò){{}}或v-bind綁定到HTML視圖中。

在實(shí)際應(yīng)用中，我們經(jīng)常需要根據(jù)一些條件來(lái)修改Vue實(shí)例中的數(shù)據(jù)，這時(shí)候，我們可以使用JS變量。比如：

new Vue({
data: {
isVisible: true
},
methods: {
toggle: function() {
this.isVisible = !this.isVisible;
}
}
})

如上所示，我們可以定義一個(gè)Vue實(shí)例中的方法，然后在該方法中通過(guò)JS變量來(lái)修改Vue實(shí)例中的數(shù)據(jù)，比如isVisible變量。

除此之外，我們還可以通過(guò)Vue組件中的props來(lái)傳遞JS變量，在組件內(nèi)部使用這些變量。比如：

Vue.component('child', {
props: ['message'],
template: '
{{ message }}
'
})

在上面的代碼中，我們定義了一個(gè)child組件，其中，我們定義了一個(gè)props屬性，它可以接收一個(gè)名為message的變量。在組件中，我們可以使用這個(gè)變量渲染視圖。

除了上述的用法，我們還可以使用計(jì)算屬性來(lái)使用JS變量。比如：

new Vue({
data: {
message: 'Hello Vue.js!',
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
})

如上所示，我們定義了一個(gè)計(jì)算屬性（computed），它可以根據(jù)某個(gè)或某些Vue實(shí)例中的數(shù)據(jù)計(jì)算得到一個(gè)新的值，然后使用這個(gè)新值進(jìn)行渲染視圖。

在Vue中使用JS變量，無(wú)論是在組件中還是在計(jì)算屬性中，都給了我們更大的靈活性，讓我們更加方便地控制視圖的渲染效果。