Comment vue.js implémente le contenu cliquer pour modifier-Voir.js-php.cn

Comment vue.js implémente le contenu cliquer pour modifier

王林

Libérer： 2021-10-12 17:24:40

original

2510 Les gens l'ont consulté

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...].

Comment vue.js implémente le contenu cliquer pour modifier

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=&#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>

Copier après la connexion

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!