Rumah > Artikel > hujung hadapan web > Cara vue.js melaksanakan klik untuk menukar kandungan

Cara vue.js melaksanakan klik untuk menukar kandungan

王林asal: 2021-10-12 17:24:402497semak imbas

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

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>

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!

php vue.js JS function this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara melaksanakan menu boleh seret dalam vue.jsArtikel seterusnya：Cara melaksanakan menu boleh seret dalam vue.js

Artikel berkaitan

Lihat lagi