Vue.js 是一個前端框架，其中的 v-model 指令可以與表單元素一起使用，這讓開發者可以輕松地獲取表單中的數據。除此之外，Vue.js 還有一個非常有用的指令——v-bind。這個指令能夠將 Vue 實例中的變量綁定到 HTML 元素上，使變量值更新時，HTML 元素也會隨之變化。

一個非常常見的需求是給列表中的元素添加選中狀態，這就需要使用 v-bind 來實現了。在 Vue.js 中，通過給 v-bind:class 添加一個 boolean 類型的變量來實現這個功能。

<template>
<div v-for="item in list" 
v-bind:class="{selected: item.isSelected}" 
v-on:click="select(item)">
{{ item.name }}
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: 'apple', isSelected: false },
{ name: 'banana', isSelected: false },
{ name: 'orange', isSelected: false },
]
}
},
methods: {
select(item) {
item.isSelected = !item.isSelected
}
}
}
</script>

上面的代碼中，v-bind:class="{selected: item.isSelected}" 表示當 item.isSelected 為 true 時，給該 div 元素添加 selected 類名。而 v-on:click="select(item)" 表示當用戶點擊該元素時，會執行 select 方法，將該元素的選擇狀態取反。

以上就是 Vue.js 中給 li 元素添加選中狀態的實現方法。這個實現方法有很強的擴展性，可以用于其他場景中，比如多選框、單選框、標簽選擇等等。只需將代碼中的列表改為相應的數據，再將 select 方法實現為對應的選擇邏輯即可。