Heim >Web-Frontend >View.js >Wie vue.js Click-to-Change-Inhalte implementiert

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

王林
王林Original
2021-10-12 17:24:402538Durchsuche

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:

<!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>

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!

Stellungnahme:
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