@click 的样式绑定 - vue.js [英] style binding by @click - vue.js

问题描述

我正在切换一个元素，当时想绑定另一个元素的样式.但我不明白如何用 @click

实现这一点

data(){返回 {显示:假，过滤器样式:{顶部:0，背景:#dfe4ea"，marginTop: "15px",marginBottom: "15px",},}}方法: {关闭(){this.show = !this.show},}<p class="closeMap" @click="closure()">close</p>

关闭下面的 div.

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

更改下面的样式 div.

有人可以给我解释一下吗?

顺便说一下，正如您所看到的，我正在绑定我的样式，这没有问题.但不是通过 @click...我想通过 @click 绑定这些样式.

解决方案

我不知道你是要在 show 还是 !show 上添加样式，反正你可以这样实现:

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

filterStyle 仅在 show 为 true

时应用

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.

解决方案

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

这篇关于@click 的样式绑定 - vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！