在前端開發中，點擊事件是非常常見的交互方式。在Vue中，我們可以通過v-on指令來監聽DOM事件。而對于li標簽的點擊事件，我們可以通過v-for指令和數據綁定來實現。 首先，我們需要在Vue實例中定義一個數組，用來存儲li標簽的內容。這個數組可以在data選項中定義，如下所示：

data: {
items: [
'item1',
'item2',
'item3'
]
}

在頁面中，我們可以使用v-for指令對這個數組進行遍歷，并渲染出多個li標簽。當我們點擊某個li標簽時，需要讓它顯示出來。這可以通過Vue中的綁定機制來實現。我們可以在li標簽上添加一個@click事件綁定，同時定義一個布爾變量來表示當前li標簽是否被點擊。如下所示：

<div id="app">
<ul>
<li v-for="item in items" @click="item.isActive = !item.isActive">
{{ item }}
<p v-if="item.isActive">You clicked {{ item }}!</p>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
items: [
{ name: 'item1', isActive: false },
{ name: 'item2', isActive: false },
{ name: 'item3', isActive: false }
]
}
})

在這個例子中，我們將items數組中的每個元素定義為一個對象，包含一個name屬性和一個isActive屬性。當我們點擊某個li標簽時，會將對應對象的isActive屬性取反，從而達到顯示/隱藏p標簽的效果。 需要注意的是，我們在li標簽上使用了v-for和@click指令。v-for指令將每個item渲染出來，同時綁定了一個@click事件，當該li標簽被點擊時觸發。在點擊事件的處理函數中，我們將對應對象的isActive屬性取反，從而改變p標簽的顯示狀態。 總結一下，通過v-for指令和@click事件綁定，我們可以實現li標簽的點擊顯示效果。在實際開發中，我們可以根據需要自定義點擊事件的處理函數，比如添加一些動畫效果、顯示更多信息等。通過Vue的響應式機制，我們可以輕松地實現這些功能，并且不會對性能造成太大影響。