집 > 기사 > 웹 프론트엔드 > vue.js가 클릭하여 변경 가능한 콘텐츠를 구현하는 방법

vue.js가 클릭하여 변경 가능한 콘텐츠를 구현하는 방법

王林원래의: 2021-10-12 17:24:402497검색

vue.js는 콘텐츠를 변경하기 위해 클릭하는 방법을 구현합니다: [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},methods:{showToggle:function( ) {this.flag...]

본 글의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터

표시된 내용을 변경하려면 스위치 버튼을 클릭해야 합니다.

다음 코드에서 플래그는 스위치의 변경을 제어하여 다른 단위를 전환할 수 있으며, 버튼도 설정할 수 있습니다. 클릭 시 표시 및 숨기기

구체 구현 코드:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>vue点击切换改变内容</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
</head>  
<body>  
    <Col span="2" style="text-align: center;">
       <p style=&#39;margin-top:8px;font-size:12px;&#39; v-text="btnText" v-show=&#39;flag==true&#39;></p>
       <p style=&#39;margin-top:8px;font-size:12px;&#39; v-text="btnText" v-show=&#39;flag==false&#39;></p>
    </Col>
    <Col span=&#39;2&#39;>
       <span @click=&#39;switchChange&#39;>
       <Icon type="arrow-swap" class=&#39;contractadd_icon&#39;></Icon>      
       </span>
    </Col>
    <script type="text/javascript">  
    new Vue({  
        el:"#example",  
        data:{  
           flag:true,//单位切换开关
           btnText:&#39;元/吨&#39;,
        },  
        methods:{  
            showToggle:function(){  
                this.flag = !this.flag  
                if(this.flag==true){  
                    this.btnText = "元/吨"  
                }else if(this.flag==false){  
                    this.btnText = "元/方"  
                } 
            }  
        }  
    })  
    </script>  
</body>  
</html>

권장 학습: php training

위 내용은 vue.js가 클릭하여 변경 가능한 콘텐츠를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php vue.js JS function this

성명：

이전 기사：vue.js에서 드래그 가능한 메뉴를 구현하는 방법다음 기사：vue.js에서 드래그 가능한 메뉴를 구현하는 방법