在vue js中单击父级时如何将类绑定到子级答案

【问题标题】：how to bind a class to child, when parent is clicked in vue js在vue js中单击父级时如何将类绑定到子级
【发布时间】：2020-11-18 11:52:57
【问题描述】：

你能帮我解决这个问题吗？单击父级时，我正在尝试在子级上绑定一个类

<div class="parent" @click="hideAndShow">
    <i class="asdas asd"> </i>
</div>

所以当我点击我的父母时，我希望图标 (i) 转换为 -90 度

这是hideAndShow方法的代码

hideAndShow() {
  $('.anotherClass').toggle();
}

【问题讨论】：

为什么要混合使用 Vue 和 jQuery？如果你正在使用 Vue，那么你可以用 jQuery 做的几乎所有事情都可以（而且应该！）用 Vue 来完成。当一个元素被 Vue 更改并且来自 jQuery 的更改可能被撤消时，修改由 Vue 从外部管理的 DOM 元素会让您非常头疼，或者更糟糕的是，Vue 会出错，因为 DOM 不再像它应该的那样。

标签： jquery vue.js

【解决方案1】：

在the documentation 中已经相当广泛地描述了将动态类和样式绑定到 dom 元素，因此我建议您阅读。

使用 Vue 时，请考虑您的组件可以处于哪些状态。然后弄清楚您希望何时以及如何在这些状态之间进行更改。在您的情况下，您有两种状态：

显示了一个具有“anotherClass”类的元素
类“anotherClass”的元素未显示

我们如何在它们之间切换？好吧，我们使用数据属性并根据我们需要放置哪些类来计算。为此，我们使用简写语法 :class="variable" 和一个计算属性，该属性根据数据属性添加或删除一个类，该数据属性控制我们是否要显示具有类“anotherClass”的元素。

<template>
  <div class="parent" @click="showDescriptiveNameOfThing = !showDescriptiveNameOfThing">
    <i :class="iconClasses"></i>
    <div :class="descriptiveNameOfThingClasses"></div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      showDescriptiveNameOfThing: false
    }
  },
  computed: {
    iconClasses() {
      return {
        asdas: true,
        asd: true,
        rotate: this.showDescriptiveNameOfThing
      }
    },
    descriptiveNameOfThingClasses() {
      return {
        another-class: true,
        show: this.showDescriptiveNameOfThing
      }
    }
  }
</script>

<style>
  .another-class {
    visibility: hidden;
  }

  .another-class.show {
    visibility: visible;
  }

  .asdas.rotate {
    transform: rotate(-90deg);
  }
</style>

另外一点（我已经在评论中添加了这一点），如果您使用 Vue，那么您可以使用 jQuery 完成的几乎所有事情都可以（并且应该！）使用 Vue 完成。修改由 Vue 从外部管理的 DOM 元素会让您非常头疼，因为 Vue 更改了一个元素并且从 jQuery 进行的更改可能会被撤消，或者更糟糕的是，Vue 会出错，因为 DOM 不再是应有的样子。

【讨论】：