javascript - 如何更改 Vue 容器内某个对象的类？

Question

如果按下按钮，Vue 容器中的单个对象我想取消该类。如果没有容器，可以使用 v-bind:class 选项，如下所示，但在容器中这对我不起作用。我能做什么？

(只是为了澄清，v-on:click 监听器在此示例中按其应有的方式工作)

侧边栏.vue:

  <template>    
        <div class="content-list" id="content-buttons">
            <a class="content-list-item" v-on:click="$emit('showece')" v-bind:class="{ 'content-list-item-brand': selectedece }">
                <p style="text-align: center">ECE</p>
            </a>
            <a class="content-list-item">
                <p style="text-align: center">Service2</p>
            </a>                    
        </div>
    </template>

    <script>
        export default {
            name:"sidebar" ,
            props: {

            },
        }
    </script>

main.vue:

<template>
  <div id="app" class="container-fluid">
    <sidebar v-on:showece="vueshowece"></sidebar>
  </div>
</template>

<script>
  var showece=false;
  var selectedece=true;
  import sidebar from '@/components/Sidebar.vue'

  export default {
    name: 'app',
    components: {
      sidebar,
    },
    data () {
      return {
        text:'Hallo'

      }
    },
    methods: {
      vueshowece() {
        if (showece==false) {
          showece=true;
          alert("test");
        }  
        else if (showece==true) showece=false;
      }
    },

  };

</script>

Answer 1

selectedece 变量在您的模板中不可用。将其移至数据；像这样的代码:

<template>
  <div id="app" class="container-fluid">
     <div class="content-list" id="content-buttons">
        <a class="content-list-item" v-on:click="toggleClass" v-bind:class="{ 'content-list-item-brand': selectedece }">
           <p style="text-align: center">ECE</p>
        </a>
        <a class="content-list-item">
          <p style="text-align: center">Service2</p>
        </a>                    
     </div>
  </div>
</template>

<script>
  import sidebar from '@/components/Sidebar.vue'

  export default {
    name: 'app',
    components: {
      sidebar,
    },
    data () {
      return {
        text:'Hallo',
        selectedece: true,
      }
    },
    methods: {
     toggleClass() {
       this.selectedece = !this.selectedece;
     }
    },
  };
</script>