vue2.0은 활성 상태로 작동하며 다른 옵션은 상호 배타적입니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

vue2.0은 활성 상태로 작동하며 다른 옵션은 상호 배타적입니다.

php中世界最好的语言

Jun 08, 2018 pm 01:59 PM

active vue 상호 배타적

이번에는 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 중국어 웹사이트!

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1668

Cakephp 튜토리얼

1427

라라벨 튜토리얼

1329

PHP 튜토리얼

1273

C# 튜토리얼

1256

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

Vue 용 버튼에 기능을 추가하는 방법 Apr 08, 2025 am 08:51 AM

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

Vue에서 시계를 사용하는 방법 Apr 07, 2025 pm 11:36 PM

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

Vue가 이전 페이지로 돌아 오는 방법 Apr 07, 2025 pm 11:30 PM

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

Vue 다중 페이지 개발은 무엇을 의미합니까? Apr 07, 2025 pm 11:57 PM

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

React vs. Vue : Netflix는 어떤 프레임 워크를 사용합니까? Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)