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

집

웹 프론트엔드

View.js

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

Oct 12, 2021 pm 05:24 PM

vue.js 콘텐츠

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 컴퓨터

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

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

구체 구현 코드:

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

로그인 후 복사

권장 학습: php training

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.