vue.js에서 클래스를 삭제하는 방법

vue.js에서 클래스를 삭제하는 방법

저는 Vue.js에 익숙하지 않기 때문에 JQuery에서와 마찬가지로 요소에서 클래스를 삭제하는 방법에 대해 도움을 받을 수 있습니다.

$('.class1').removeClass("class2");

그들의 문서에 쓰여 있는 것으로 보아 당신의 코드로 해서는 안 되는 일이라고 말하고 싶습니다.

대신 CSS 클래스는 속성으로 제한하고 클래스의 존재 여부는 속성 값으로 판단해야 합니다.

예(문서 참조):

<div v-bind:class="{ active: isActive }"></div>

위의 구문은 다음 명령어가 존재함을 의미합니다.active클래스는 데이터 속성의 진실성에 따라 결정됩니다.isActive(만일 경우)isActive IS true-수업이 있습니다.)

오브젝트에 더 많은 필드가 있으면 여러 클래스를 전환할 수 있습니다.또,v-bind:class디렉티브는 플레인클래스 애트리뷰트와 공존할 수도 있습니다.따라서 다음 템플릿이 지정됩니다.

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

그리고 다음 데이터:

data: {
  isActive: true,
  hasError: false
}

다음과 같이 렌더링:

<div class="static active"></div>

언제isActive또는hasError변경되면 클래스 목록이 그에 따라 업데이트됩니다.예를 들어,hasErrortrue가 되면 클래스 리스트는static active text-danger.

이것이 올바른 방법이라고 생각합니다:) 자세한 내용은 설명서를 참조하십시오.

어떤 이유로 클래스를 삭제해야 하는 경우 jQuery를 앱에 종속 요소로 추가하여 사용할 수 있습니다(단, 권장하지 않음).

해피 해킹 :)

이 요소가 있으면

<div id="randomDiv">
  <p :style="{backgroundColor:color}" @click="updateBackgroundColor(color)">{{obj.name}}</p>
</div>

:style을 사용하면 요소에 스타일을 추가할 수 있습니다.이 경우 backgroundColor 스타일을 추가할 수 있습니다.이것은 무엇이든 상관없습니다.Vue 오브젝트 아래에 있는 색상 값을 알 수 있습니다.VM = new Vue() 개체에서는 처음에는 노란색으로 설정되어 있습니다.이 개체에는 업데이트를 수행하는 updateBackgroundColor라는 기능도 있습니다.색상은 요소의 @click에서 이 함수로 전달됩니다.

var obj = {
  "name": "Curtis",
}


var vm = new Vue({
  el: '#randomDiv',
  data: function (){
    return  {
        obj,
        color: 'yellow',
    }
  },
  methods: {
        updateBackgroundColor: function (color) {
        console.log(color);
          if(color === "yellow"){
            this.$set(this.$data, 'color', 'red');
          }
          else{
            this.$set(this.$data, 'color', 'yellow');
          }
        }
    }
});

JsFiddle에도 붙여놨습니다.

[https://jsfiddle.net/ifelabolz/todqxteh/1044/] [1]

CSS를 추가하여 my case show/hide modal

요소 태그 html에서

<a href="#" class="copyright" v-on:click="show()">Add Line For Ad</a>

<modal name="qrcode">
 MODAL IS SHOW NOW!!.
</modal>

그리고.

export default {
  methods: {
    show: function() {
      this.$modal.show("qrcode");
    },
    hide() {
      this.$modal.hide("qrcode");
    },
    toggleBodyClass(className) {
      const el = document.body;
      // debugger;
      el.classList.remove(className);
    }
  },
  mounted() {
    this.toggleBodyClass("v--modal");
  }
};

이 CSS

.v--modal {
  background: red;
}

이게 도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/53394835/how-to-remove-class-in-vue-js