Vue의 스타일 바인딩에 대한 자세한 설명

Vue의 스타일 바인딩은 웹 페이지에서 널리 사용됩니다. CSS 스타일을 추가하고 CSS 스타일을 삭제하는 것은 jq로 구현하는 것이 어렵지 않습니다. 이번에는 Vue의 CSS 스타일 바인딩에 대한 지식 포인트를 극복하기 위해 예제를 사용합니다.

효과:

페이지에 "hello"라는 텍스트가 있습니다. 안녕하세요를 클릭하면 텍스트 색상이 빨간색으로 바뀌고 텍스트 색상이 다시 검은색으로 변합니다. 그런 다음 CSS 스타일을 통해 색상 변경을 제어해야 합니다.

방법 1:

<div id="root" @click=&#39;handleClick&#39; :class=&#39;{actived:isActived}&#39;>
        Hello World
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                isActived:false,
            },
            
            methods:{
                handleClick:function(){
                     this.isActived=!this.isActived;
                }
            }
            
        })
    </script>
    <style>
        .actived{
            color: red;
        }
    </style>

이 쓰기 방법을 설명하세요: class='{actived:isActived}', isActived가 false이면 class='', isActived가 true이면 class='actived'.

그래서 우리는 데이터에 기본값 false를 정의했습니다. 클릭하면 핸들클릭 메서드가 트리거되어 this.isActived가 부정된 값과 동일해집니다.

방법 2:

<div id="root" @click=&#39;handleClick&#39; :class=&#39;[isActived]&#39;>
        Hello World
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                isActived:&#39;&#39;,
            },
            
            methods:{
                handleClick:function(){
                     this.isActived=this.isActived===&#39;&#39;?&#39;actived&#39;:&#39;&#39;;
                }
            }
            
        })
    </script>
     <style>
        .actived{
            color: red;
        }
    </style>

이 방법에서는 배열을 제공하고 배열에 기본 null 값 isActived를 전달합니다. 여기서는 삼항 연산 연산자를 사용하여 가져옵니다. this.isActived의 값입니다.

삼항 연산자와 동일한 효과는 if 판단을 사용하는 것입니다:

 if(this.isActived==''){
       this.isActived='actived';
     }else{
       this.isActived='';
 }

방법 3:

위에서는 클래스를 직접 사용하여 효과를 얻었는데 html에서 스타일 스타일을 어떻게 구현합니까? 코드는 어렵지 않습니다.

<div id="root" @click=&#39;handleClick&#39; :style=&#39;styleObj&#39;>
        Hello World
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                styleObj:{
                    color:&#39;black&#39;
                },
            },
            
            methods:{
                handleClick:function(){
                     this.styleObj.color=this.styleObj.color===&#39;black&#39;?&#39;red&#39;:&#39;black&#39;;
                }
            }
            
        })
    </script>

기본적으로 검은색 글꼴을 사용합니다. 페이지 텍스트를 클릭한 후에는 handlerClick 함수가 계속 사용됩니다. 삼항 연산자 this.styleObj.color의 값을 결정하고 얻어 효과를 얻습니다.

관련 추천: "Javascript Advanced Tutorial"

위는 Vue에서 스타일 바인딩에 대한 설명입니다. 모든 길은 로마로 통합니다.

위 내용은 Vue의 스타일 바인딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!