Vue.js是一個(gè)流行的JavaScript框架，通過它我們可以快速地創(chuàng)建動態(tài)且響應(yīng)式的前端應(yīng)用。在Vue.js中，我們可以使用元素綁定(v-bind)來動態(tài)綁定一個(gè)div的class屬性來控制其樣式，實(shí)現(xiàn)組件的復(fù)用。

<div v-bind:class="{ selected: isSelected }"></div>

在這個(gè)例子中，我們使用v-bind:class指令來動態(tài)地綁定一個(gè)class屬性，如果isSelected為true，則該div元素將會被添加上selected這個(gè)class。

然而，在實(shí)際開發(fā)中，我們可能會遇到需要復(fù)選的場景，例如一個(gè)復(fù)選框列表，能夠通過選擇多個(gè)選項(xiàng)來實(shí)現(xiàn)批量操作。在Vue.js中，我們可以使用一個(gè)數(shù)組變量來存儲被選中的選項(xiàng)，然后通過v-bind:class指令來動態(tài)地控制每個(gè)選項(xiàng)元素的樣式。

<div v-for="(option, index) in options" :key="index"
v-bind:class="{ selected: selectedOptions.includes(option) }"
v-on:click="toggleOption(option)">
{{ option }}
</div>
<script>
export default {
data() {
return {
options: ['Option A', 'Option B', 'Option C', 'Option D'],
selectedOptions: [],
}
},
methods: {
toggleOption(option) {
if (this.selectedOptions.includes(option)) {
this.selectedOptions.splice(this.selectedOptions.indexOf(option), 1);
} else {
this.selectedOptions.push(option);
}
}
}
}
</script>

在這個(gè)例子中，我們使用了v-for指令來動態(tài)地生成復(fù)選框列表，使用了v-bind:class指令來動態(tài)地控制每個(gè)選項(xiàng)元素的樣式。當(dāng)選中一個(gè)選項(xiàng)時(shí)，我們通過toggleOption方法來動態(tài)地修改selectedOptions數(shù)組變量，從而實(shí)現(xiàn)多選的功能。