Cara vue.js melaksanakan klik untuk menukar kandungan-View.js-php.cn

Cara vue.js melaksanakan klik untuk menukar kandungan

王林

Lepaskan： 2021-10-12 17:24:40

asal

2552 orang telah melayarinya

vue.js melaksanakan kaedah mengklik untuk menukar kandungan: [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},kaedah:{ showToggle :function(){this.flag...].

Cara vue.js melaksanakan klik untuk menukar kandungan

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.9, komputer thinkpad t480 .

Kita perlu mengklik butang suis untuk menukar kandungan yang dipaparkan dan bertukar antara unit yang berbeza

Dalam kod berikut, bendera adalah bersamaan dengan suis dan unit yang berbeza boleh ditukar dengan mengawal perubahan. daripada suis. Perkara yang sama berlaku pada contoh lain untuk menukar kandungan Anda juga boleh menetapkan butang untuk memaparkan, menyembunyikan, dsb. apabila diklik

Kod pelaksanaan terperinci:

<.>Pembelajaran yang disyorkan:

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

Salin selepas log masuk

latihan php

Atas ialah kandungan terperinci Cara vue.js melaksanakan klik untuk menukar kandungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!