Question

在Vue.js中，您如何定位/检测单击的元素以执行基本的切换类？

我已经编写了此代码，它可以成功切换，但是当您单击a时，该类将应用于所有li的

HTML

  <ul id="app" class="projects">
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project A</a></li>
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project B</a></li>
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project C</a></li>
    <li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project D</a></li>   </ul>

JS

  new Vue({
    el: '#app',
    data: {
      show: false,
    },
    computed: {
      dyClass: function() {
        return {
          show: this.show
        }
      }
    }
  })

我是Vue的新手。

编辑。

我设法通过下面的混合帮助使其工作，但是我似乎无法获得切换效果。

  <ul id="app" class="projects">
    <li :class="{show:selected == 1}">
      <a href="" @click.prevent.stop="selected = 1" >Exposure</a>
    </li>
    <li :class="{show:selected == 2}">
      <a href="" @click.prevent.stop="selected = 2" >Exposure</a>
    </li>
    <li :class="{show:selected == 3}">
      <a href="" @click.prevent.stop="selected = 3" >Exposure</a>
    </li>        
  </ul>

和

  new Vue({
    el: '#app',
    data: {
      selected: false,
    }
  });

Answer 1

据我了解，您有一些li项，并且您想在单击特定的li时添加一个活动的类。

解决方案：

“ html”部分：

<div id="app">
  <ul class="projects">
    <li v-for="project in projects"
        :key="project.id"
        :class="{ active: project.id === activeProjectId }"
        @click="activeProjectId = project.id"
    >
      <a href="#">{{ project.name }}</a>
    </li>
  </ul>
</div>

“ vue”部分

new Vue({
  el: "#app",
  data: {
        projects: [
     { id: 1, name: 'Project A' },
     { id: 2, name: 'Project B' },
     { id: 3, name: 'Project C' },
     { id: 4, name: 'Project D' },
    ],
    activeProjectId: 1
  },

})

然后在“活动”类中添加一些CSS。

有关更多信息，See the fiddle

Answer 2

您可以将元素传递给函数（bin/post -c films example/films/films.json bin/post -c films example/films/films.xml bin/post -c films example/films/films.csv -params "f.genre.split=true&f.directed_by.split=true&f.genre.separator=|&f.directed_by.separator=|"）：

$event然后进行计算：

:click=dyClass($event)

定位Vue中的点击元素

2 个答案: