隨著移動設(shè)備和響應(yīng)式設(shè)計的興起，越來越多的網(wǎng)站需要根據(jù)屏幕大小來調(diào)整布局和樣式。在Vue中，我們可以使用一些方法來判斷屏幕大小并作出相應(yīng)的操作。

首先，我們可以使用window對象的innerWidth屬性來獲取窗口的寬度。這個屬性返回窗口的視口寬度，即不包括滾動條和邊框的寬度。我們可以將其存儲在Vue實例的數(shù)據(jù)中，如下所示：

data() {
return {
screenWidth: window.innerWidth
}
}

然而，這種方法有一個缺點：當(dāng)窗口大小改變時，我們需要手動更新屏幕寬度。為了解決這個問題，我們可以使用Vue的watch屬性來監(jiān)聽窗口的resize事件，如下所示：

mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.screenWidth = window.innerWidth
}
}

在這個例子中，我們使用了mounted和beforeDestroy生命周期鉤子來添加和移除窗口resize事件，handleResize方法會在窗口大小改變時被觸發(fā)。

除了使用組件的數(shù)據(jù)來判斷屏幕大小，我們還可以使用計算屬性來生成相應(yīng)的樣式。例如，我們可以使用v-bind動態(tài)綁定組件的class屬性，根據(jù)屏幕大小添加相應(yīng)的class名稱。在這個例子中，我們定義了一個computed屬性，根據(jù)screenWidth屬性的值來返回相應(yīng)的class名稱：

<template>
<div v-bind:class="classObject">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</template>
<script>
export default {
data() {
return {
screenWidth: window.innerWidth
}
},
computed: {
classObject() {
return {
'small-screen': this.screenWidth <= 768,
'big-screen': this.screenWidth > 768
}
}
}
}
</script>
<style>
.small-screen {
font-size: 12px;
}
.big-screen {
font-size: 16px;
}
</style>

在這個例子中，我們使用了classObject對象來定義了兩個class名稱，分別對應(yīng)于屏幕寬度小于等于768px和大于768px時的樣式。在模板中，我們使用v-bind:class指令來動態(tài)綁定組件的class屬性。

總之，Vue提供了很多方法來判斷屏幕大小并作出相應(yīng)的操作。我們可以使用window對象的innerWidth屬性來獲取窗口的寬度，使用Vue的watch屬性來監(jiān)聽resize事件并更新組件的數(shù)據(jù)，以及使用計算屬性來生成相應(yīng)的樣式。