如何根據 id 在 vuejs 2 中添加或刪除類

Question

我想使用 vuejs 基於 id 向元素添加或刪除類，但此代碼將行為應用於所有元素。 如何通過 id 向元素添加/刪除類？ 提前謝謝大家。

 new Vue({ el:"#test", data: { msg: 'msg goes here', isActive: false }, methods: { log: function(e) { this.isActive = ! this.isActive //alert(e.currentTarget.id); } } });

 .active { background: red }

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <div id="test"> <div id="1" v-on:click="log($event)" v-bind:class="{ active: isActive }"> {{ msg }} </div> <div id="2" v-on:click="log($event)" v-bind:class="{ active: isActive }"> {{ msg }} </div> </div>

Answer 1

這是使用組件來實現您正在尋找的行為的示例：

 // register const clickable = Vue.component('clickable', { props: ['msg'], data: function() { return { isActive: false } }, template: '<div :class="{ active: isActive }" @click="isActive = !isActive">{{ msg }}</div>' }) new Vue({ el: "#test", components: { clickable }, data: function() { return { msg: 'msg goes here', isActive: false } } });

 .active { background: red }

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <div id="test"> <clickable :msg='msg'></clickable> <clickable :msg='msg'></clickable> </div>

Answer 2

你還沒有內化基本的 vuejs 概念。

https://v2.vuejs.org/v2/guide/components.html

您的兩個元素都應該是單獨的組件。