스타일 바인딩을 @click - vue.syslog로 지정합니다.

스타일 바인딩을 @click - vue.syslog로 지정합니다.

나는 그 당시, 스타일 다른 요소 바인딩 하고 싶은 요소 toggling 있다.하지만과 이를 이루기 위해 이해하지 않았다.@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는 다음과 같습니다.

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

스타일을 변경합니다.

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

누가 나한테 설명해 줄 사람 없어?

편집:그런데 그, 당신은 내가 이 스타일 결합입니다 참조하십시오, 문제 없어요.하지만지 않음으로써@click...나는 그 스타일을 지탱하고 싶다.@click.

만약에 스타일을 추가할 지 모르겠네요.show또는!show어쨌든 이 방법으로:그것을 달성할 수 있다.

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

filterStyle경우에만 적용될 것이다.show이true

내가 너에게에 따라 변경되는computed 속성도 만들 수 있겠죠.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클릭 기능에서 또 다른 이야기다.

언급URL : https://stackoverflow.com/questions/56439880/style-binding-by-click-vue-js