vue에서 태그 스타일을 수정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

vue에서 태그 스타일을 수정하는 방법은 무엇입니까?

亚连

풀어 주다： 2018-06-11 15:30:07

원래의

3556명이 탐색했습니다.

이번 글은 Vue에서 태그의 스타일을 동적으로 수정하는 방법을 주로 소개하고 참고용으로 올려드립니다.

회사에서는 프론트엔드와 백엔드 분리를 사용하여 HTML5 페이지를 만드는 유사한 프로젝트를 진행할 예정입니다. 리더는 효과를 보고 싶다고 말했습니다. Toutiao 헤더의 탐색은 스크롤되고 카테고리가 추가될 수 있으며, 우리 프로젝트에서도 마찬가지입니다. 따라서 탐색할 때 다른 카테고리를 클릭해야 하며 이에 따라 스타일도 변경됩니다. 인터넷에서 검색한 결과 다음과 같은 코드가 간결하고 명확합니다. 그러나 구체적인 URL을 잊어버렸으므로 게시하겠습니다. 먼저 모든 사람을 위한 코드를 살펴보세요. URL을 알고 싶다면 온라인으로 검색해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <button v-for=&#39;item in isp&#39; @click=&#39;f1($index)&#39; 
    :class="{&#39;active&#39;: $index === isActive}">{{item}}</button>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        isp: [&#39;BGP&#39;,&#39;中国电信&#39;,&#39;中国联通&#39;,&#39;联通电信双线&#39;]
      },
      methods:{
        f1:function(index){
          this.isActive=index
        }
      }
    })
  </script>
</body>
</html>

로그인 후 복사

다음과 같습니다:

vue는 태그의 스타일을 동적으로 수정합니다.jpeg

다음은 내 프로젝트의 코드입니다.

위 코드는 작성자가 vue 버전 1.0을 사용하고 아래에서는 제가 사용합니다 버전 2.0.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .red-link{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <a href="javascript:void (0);" rel="external nofollow" class="box1-item" 
       v-for="(item, index) in menu"
       :class="{ &#39;red-link&#39;:index === isActive }" 
       v-on:click.stop.prevent=&#39;switchTab(index)&#39;>
       {{ item }}
    </a>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        menu: [&#39;推荐&#39;, &#39;人物&#39;, &#39;干货&#39;, &#39;行业&#39;, &#39;融资&#39;,&#39;�教育&#39;,&#39;大数据&#39;],
      },
      methods:{
        switchTab: function (index) {
          this.isActive = index;
        }
      }
    })
  </script>
</body>
</html>

로그인 후 복사

코드는 기본적으로 똑같고, 다음에 사용할 때 찾기 쉽도록 직접 정리했습니다. 또한 필요한 친구들이 사용하면 좋겠습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.