이번에는 vue2.0 동작 active의 다른 옵션 상호 배제에 대해 알려드리겠습니다. vue2.0 동작 active의 다른 옵션 상호 배제에 대한 주의사항은 무엇인지 살펴보겠습니다. z
일반 js에서. 클릭하여 활성 항목을 선택한 다음 다른 항목을 취소하는 효과를 얻으려면 클릭 시 여러 돔에 대한 활성 클래스를 취소하도록 클래스를 정의하고 이 클래스 이름을 현재 요소에 추가하면 됩니다. 매우 장황하므로 살펴보겠습니다. 바로 코드를 살펴보겠습니다(포스터가 jq를 사용하고 있음을 의미합니다).
<style> * { margin: 0; padding: 0; } li { list-style: none; width: 100px; margin-top: 10px; border: 1px solid red; } li:active { cursor: pointer; } .active { background-color: aqua; } </style> <script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script> </head> <body> <ul> <li>this is pne</li> <li>this is two</li> <li>this is three</li> </ul> </body> <script> $(() => { $("li").click((e) => { $("li").removeClass("active"); $(e.target).addClass("active"); }) }) </script>
효과는 아래 그림과 같습니다.
그러나 vue에서는 dom 작업을 수행하는 것이 권장되지 않습니다. dom을 수행할 필요가 없다면 vue2.0 dom의 효과를 얻을 수 있는 ref 속성이 있습니다. 그럼 dom을 잡지 않고 작업을 해보자:
나는 webpack과 vue-cli scaffolding에 익숙하기 때문에 포스터의 모든 Vue 코드는 webpack scaffolding에 배치되고, pug와 scss 전처리기들도 사용된다.
<template lang="pug"> ul li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}} </template> <style lang="scss"> li { list-style: none; width: 100px; margin-top: 10px; border: 1px solid red; &:hover { cursor: pointer; } } .active{ background-color: aqua; } </style> <script> export default{ data(){ return { classArr: ["one", "two", "three"], num:"", } }, methods: { result(index){ this.num = index; } }, computed:{ resultNum(){ return this.num; } } } </script>
아이디어는 다음과 같습니다.
이 코드는 키워드 인덱스를 사용하고 계산된 속성도 사용합니다. 현재 인덱스 인덱스가 현재 요소 클릭 시간의 첨자와 동일할 때, 활성 클래스 이름이 트리거됩니다. 매우 간결합니다. 이해가 되지 않으면 블로거에 가입하여 함께 토론할 수 있습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트!
추천 도서:
Element-UI 테이블을 사용하여 드래그 앤 드롭 기능 구현
위 내용은 vue2.0은 활성 상태로 작동하며 다른 옵션은 상호 배타적입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!