vue.js - 如果孩子在vue中有课程，如何设置父母的样式？

Question

如果孩子有课，如何设置父 div 的样式？我尝试使用 $refs 计算，但 $refs.[class] 始终未定义

例子

<div 
:style="isChildHasClass"
class="container">
    <div class="child example"></div>
</div>

仅当子块具有类“示例”时，如何使用类“容器”设置 div 块的样式？

标签： vue.js

Answer 1

尝试这个：

new Vue({
  el: "#app",
  data: {
    isExample: true,
  },
  created() {
    setInterval(() => {
      this.isExample = !this.isExample
    }, 2000)
  },
  computed: {
    parentClasses() {
      return ['parent', this.isExample ? 'container' : null];
    },
    childClasses() {
      return ['child', this.isExample ? 'example' : null]
    }
  }

})

.container {
  background: tomato;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <div :class="parentClasses">
    parentClasses: {{parentClasses}}
    <div :class="childClasses">childClasses: {{childClasses}}</div>
  </div>
</div>