Heim > Artikel > Web-Frontend > Wie vue.js Click-to-Change-Inhalte implementiert
Wie vue.js Click-to-Change-Inhalte implementiert
- 王林Original
- 2021-10-12 17:24:402496Durchsuche
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...].
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='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==true'></p>
<p style='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==false'></p>
</Col>
<Col span='2'>
<span @click='switchChange'>
<Icon type="arrow-swap" class='contractadd_icon'></Icon>
</span>
</Col>
<script type="text/javascript">
new Vue({
el:"#example",
data:{
flag:true,//单位切换开关
btnText:'元/吨',
},
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!