Question

我有一组三个v卡组件。前两个具有设置的颜色，而第三张卡片的颜色是动态的。当前，每当鼠标悬停在任何一张卡上时，第三张卡就会变为绿色。但是，我想根据鼠标悬停的位置来更改第三张卡的颜色，因此它将呈现鼠标悬停在哪张卡上的颜色。在这种情况下，将卡3悬停在红卡上时为红色，将鼠标悬停在蓝卡上时为蓝色，将鼠标悬停在其他所有位置时为白色。 Here is a codepen.

SELECT column_name 
FROM information_schema.columns 
WHERE table_name='bev'
and column_name  not in ('Jahr','GKZ');

Answer 1

这应该很好。

HTML

<div id="app">
  <v-app>
    <v-container>
      <v-card width="100" height="100" color="blue"
              @mouseover="mouseIn($event)"
              @mouseleave="mouseOut"></v-card>
      <v-card width="100" height="100" color="red"
              @mouseover="mouseIn($event)"
              @mouseleave="mouseOut"></v-card>
      <v-card width="100" height="100" :color='thirdColor'
              @mouseover="mouseIn"
              @mouseleave="mouseOut"></v-card>
    </v-container>
  </v-app>
</div>

JS

new Vue({
        el: "#app",
        vuetify: new Vuetify(),
        data() {
            return {
                thirdColor: '',
                hover: false
            }
        },
        methods: {
          mouseIn(e){
            this.hover=true
            this.thirdColor=e.target.classList[3]
          },
          mouseOut(){
            this.hover=false
            this.thirdColor=''
          }
        }
    });

如何基于另一个组件的鼠标悬停来更改vuetify组件的属性？

1 个答案: