Wie vue.js Click-to-Change-Inhalte implementiert-View.js-php.cn

Heim

Web-Frontend

View.js

Wie vue.js Click-to-Change-Inhalte implementiert

Oct 12, 2021 pm 05:24 PM

vue.js 内容

vue.js implementiert die Methode zum Klicken, um den Inhalt zu ändern: [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},methods:{showToggle:function( ) {this.flag...].

Wie vue.js Click-to-Change-Inhalte implementiert

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer

Wir müssen auf die Umschalttaste klicken, um den angezeigten Inhalt zu ändern und zu wechseln zwischen verschiedenen Einheiten.

Im folgenden Code entspricht das Flag einem Wechsel. Dasselbe gilt für andere Schaltinhaltsinstanzen zum Anzeigen und Ausblenden beim Klicken.

Der spezifische Implementierungscode:

&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;

Nach dem Login kopieren

Empfohlenes Lernen: php-Schulung

Das obige ist der detaillierte Inhalt vonWie vue.js Click-to-Change-Inhalte implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn