Maison > Article > interface Web > Comment vue.js implémente le contenu cliquer pour modifier
Comment vue.js implémente le contenu cliquer pour modifier
- 王林original
- 2021-10-12 17:24:402497parcourir
vue.js implémente la méthode de clic pour changer le contenu : [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},methods:{showToggle:function( ) {this.flag...].
L'environnement d'exploitation de cet article : système Windows10, vue.js 2.9, ordinateur thinkpad t480
Nous devons cliquer sur le bouton de commutation pour modifier le contenu affiché et changer entre différentes unités. .
Dans le code suivant, le drapeau est équivalent à un commutateur En contrôlant le changement du commutateur, différentes unités peuvent être commutées. La même chose s'applique à d'autres instances de contenu de commutation, et le bouton peut également être défini. à afficher et à masquer lorsque vous cliquez dessus
Le code d'implémentation spécifique :
<!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>Apprentissage recommandé : formation php
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!