Vue中的li收縮，是指在列表中的某些項(xiàng)可以點(diǎn)擊收縮或展開，以便更好地組織和展示數(shù)據(jù)。

如何實(shí)現(xiàn)這種收縮功能呢？下面是一個(gè)使用Vue的示例代碼：

<ul>
<li v-for="item in items">
<div v-on:click="showBox(item)">
{{ item.title }}
</div>
<div v-show="activeBox === item">
{{ item.content }}
</div>
</li>
</ul>

在這個(gè)代碼中，我們使用v-on指令為每個(gè)列表項(xiàng)的標(biāo)題綁定了一個(gè)點(diǎn)擊事件，并將當(dāng)前點(diǎn)擊的項(xiàng)傳入showBox函數(shù)。showBox函數(shù)會(huì)設(shè)置一個(gè)activeBox變量，以便在模板中根據(jù)activeBox的值來顯示或隱藏項(xiàng)的內(nèi)容。

接下來，我們需要在Vue實(shí)例中定義showBox函數(shù)和變量：

var app = new Vue({
el: '#app',
data: {
items: [
{
title: 'Item 1',
content: 'Content for item 1'
},
{
title: 'Item 2',
content: 'Content for item 2'
},
{
title: 'Item 3',
content: 'Content for item 3'
}
],
activeBox: null
},
methods: {
showBox: function(item) {
if (this.activeBox === item) {
this.activeBox = null;
} else {
this.activeBox = item;
}
}
}
})

這個(gè)示例代碼演示了如何使用Vue實(shí)現(xiàn)li收縮功能。我們將每個(gè)列表項(xiàng)的標(biāo)題綁定了一個(gè)點(diǎn)擊事件，并通過activeBox變量來控制項(xiàng)內(nèi)容的顯示和隱藏。這種方式不僅需要較少的代碼，也極大地降低了模板中的邏輯。