style binding by @click - vue.js

Question

I am toggling one element and at that time, want to bind style another element. But I didn't understand how to achieve this with @click

data(){
    return {
        show:false,
        filterStyle: {
            top: 0,
            background: "#dfe4ea",
            marginTop: "15px",
            marginBottom: "15px",
        },
    }
}

methods: {
    closing(){
        this.show = !this.show
    },
}

<p class="closeMap" @click="closing()">close</p>

closing div below.

<div v-show="!show"></>

changing styles div below.

<div :style="filterStyle" class="filter"></div>

Is there someone can explain it to me?

Edit: By the way, as you see I am binding my styles, no problem with that. But not by @click ... I want to bind those styles by @click .

Answer 1

I don't know if you want to add style on show or !show , anyway you can achieve it in this way:

<div :style="show ? filterStyle : null" class="filter"></div>

filterStyle will be applied only when show is true

Answer 2

I guess you could make a computed property, which changes based on this.show :

// Template
<div :style="filterStyle" class="filter"></div>

// Computed property
computed: {
  filterStyle() {
    if (this.show) {
       return {
         top: 0,
         background: '#dfe4ea',
         marginTop: '15px',
         marginBottom: '15px'
       };
    } else {
      return '';
    }
  }
}

You could also set filterStyle to something else in the click function