지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > View.js > 본문

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

王林
풀어 주다： 2021-10-12 17:24:40
원래의
2512명이 탐색했습니다.

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

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

본 글의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue.js 内容
원천：php.cn
이전 기사：vue.js에서 드래그 가능한 메뉴를 구현하는 방법 다음 기사：vue.js에서 모두 선택 기능을 구현하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
전달자 토큰을 처리하는 데 적합한 애플리케이션 아키텍처를 선택하세요. OAuth2.0을 사용하는 API를 사용하고 싶습니다. 즉, 서버가 내 신원을 확인할 수 있도록 모든 후속 요청에 포함해야 하는 액세스 토큰을 얻어야 합니다. 애...
에서 2024-04-04 08:55:57
0
1
353
Vue.js에 대한 API 풀 생성 나에게 무슨 문제가 있는지, 왜 이것이 작동하지 않는지 모르겠습니다. 임의의 개 사진 API가 작동하기를 원하지만 작동하지 않습니다. 아래 코드를 참조하세요. i...
에서 2024-04-03 16:12:29
0
1
363
Vue.js 데이터 값은 변경되지 않습니다. 나는 cat_pressed라는 데이터와 데이터 값을 변경하는 이 함수를 가지고 있습니다:changeCat(){this.cat_pressed===='brauh'} ...
에서 2024-04-03 09:29:23
0
1
369
Vue.js에서 getter 및/또는 계산된 속성을 사용하는 모범 사례 저는 vue.js를 좋아하고 계산된 속성과 VueXgetters도 정말 좋아합니다. 그러나 내가 사용하는 방식이 성능상의 단점을 가져올지 확신할 수 없는 지점에 ...
에서 2024-04-01 18:22:49
0
1
431
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿