Question

我正在切换一个元素，当时，我想将样式绑定到另一个元素。但是我不明白如何使用@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>

以下关闭div。

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

更改下面的样式div。

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

有人可以向我解释吗？

编辑：顺便说一句，如您所见，我正在绑定样式，这没有问题。但不是用@click来...我想用@click来绑定那些样式。

Answer 1

我不知道您是否要在show或!show上添加样式，无论如何您都可以通过以下方式实现：

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

filterStyle仅在show为true时适用

Answer 2

我想您可以创建一个计算属性，该属性会根据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 '';
    }
  }
}

您还可以在点击功能中将filterStyle设置为其他内容

@click绑定样式-vue.js

2 个答案: