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

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

php中世界最好的语言

풀어 주다： 2018-06-08 13:59:19

원래의

1346명이 탐색했습니다.

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