在Vue中，經(jīng)常會(huì)遇到需要判斷一個(gè)數(shù)組是否為空的場景。可以使用v-if指令來實(shí)現(xiàn)條件渲染。在模板中使用v-if指令需要對(duì)應(yīng)的數(shù)據(jù)。

<template>
<div v-if="myArray.length">
<p>數(shù)組不為空</p>
</div>
<div v-else>
<p>數(shù)組為空</p>
</div>
</template>
<script>
export default {
data() {
return {
myArray: []
};
}
}
</script>

上述代碼中，myArray是一個(gè)空數(shù)組。在模板中使用v-if指令判斷myArray數(shù)組的長度是否為0，如果不為0，則渲染“數(shù)組不為空”的內(nèi)容，否則渲染“數(shù)組為空”的內(nèi)容。

如果頁面中有多個(gè)地方需要判斷myArray數(shù)組是否為空，可以將判斷邏輯封裝成一個(gè)計(jì)算屬性，然后在模板中調(diào)用該計(jì)算屬性。這樣可以減少重復(fù)代碼，方便維護(hù)。

<template>
<div v-if="myArrayIsNotEmpty">
<p>數(shù)組不為空</p>
</div>
<div v-else>
<p>數(shù)組為空</p>
</div>
</template>
<script>
export default {
data() {
return {
myArray: []
};
},
computed: {
myArrayIsNotEmpty() {
return this.myArray.length > 0;
}
}
}
</script>

上述代碼中，將判斷myArray數(shù)組是否為空的邏輯封裝成myArrayIsNotEmpty計(jì)算屬性，并在模板中調(diào)用該計(jì)算屬性。