如何使用 CSS 和 VueJS 控制父元素的样式?

Posted

技术标签:

【中文标题】如何使用 CSS 和 VueJS 控制父元素的样式?【英文标题】:How to control the style of a parent element with CSS and VueJS? 【发布时间】:2018-11-15 22:33:35 【问题描述】:

我遍历一组用户以使用 VueJS 'for' 语句构建一个表。

有一个名为“已批准”的列。如果是真的,那么我希望整个表格行都是绿色的。如何实现?

                <tbody>
                  <tr v-for="user in users" >
                    <td v-for="key in columns">
                        <!-- At This point I can tell if the user is approved but how to change the style of the parent tr element?? -->
                        <span v-if='key == "approved" && user[key] == 0'>
                            Not Approved
                        </span>

                        <span v-else-if='key == "approved" && user[key] == 1'>
                            Approved!
                        </span>

                        <span v-else>
                            user[key]
                        </span>
                    </td>
                  </tr>
                </tbody>

【问题讨论】:

【参考方案1】:

如果您总是有“已批准”列,您可以通过这种方式简单地实现它:

<tr v-for="user in users" 
    v-bind:style="backgroundColor: user['approved'] == 1 ? 'green' : '' ">

<tr v-for="user in users" 
    v-bind:class="green: user['approved'] == 1">


.green 
     background-color: green:
 

【讨论】:

【参考方案2】:

您可以使用方法将类动态分配给tr

<tbody>
  <tr v-for="user in users" :class="'green': isApprove(user, columns)">
    <td v-for="key in columns">
        <!-- At This point I can tell if the user is approved but how to change the style of the parent tr element?? -->
        <span v-if='key == "approved" && user[key] == 0'>
            Not Approved
        </span>

        <span v-else-if='key == "approved" && user[key] == 1'>
            Approved!
        </span>

        <span v-else>
            user[key]
        </span>
    </td>
  </tr>
</tbody>


<script>
  ...
  methods: 
    isApprove(user, columns) 
      for (let idx in columns) 
        const key = columns[idx]
        if (key === 'approved' && user[key] == 1) 
          return true
        
      
      return false
    
  

</script>

<style>
.green 
  background-color: green;

</style>

【讨论】:

您可以使用arrow functions 和some 方法缩短语法。

以上是关于如何使用 CSS 和 VueJS 控制父元素的样式?的主要内容,如果未能解决你的问题,请参考以下文章

CSS样式当时 CSS定位 绝对定位

如何根据子节点删除父节点和/或 css 样式

js如何修改样式?

将父元素悬停到子标签元素后如何更改相同的css样式?

如何在 vuejs 中隔离父元素和子元素之间的单击事件处理程序

有办法去掉从父级元素继承下来的 CSS 样式吗