@click的样式绑定- vue.js

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 绑定那些样式。

- user10828115

---

@click 是一个钩子，允许您在用户单击时运行代码（可以做任何事情）。这意味着您可以更改 vm 中的属性，从而导致应用于单击元素的不同样式。 - tao

Answer 1

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

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

filterStyle 只有在 show 为 true 时才会应用。

- Fab

---

我会以同样的方式去做，但是如果您愿意，我认为这种方法会更加易读：<div :class="{ 'filter': !show, 'filterStyle': show }" ></div> - riesa

@riesa filterStyle不是一个类，我认为他想在两种情况下（show和!show）都将filter类保留在元素上。当然，使用不同的类可以更好地实现这一点。 - Fab

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设置为其他内容

- Kris D. J.

---

如何将它与<style>标签中的样式结合起来？ - parsecer