Rumah >hujung hadapan web >View.js >Cara vue.js melaksanakan klik untuk menukar kandungan
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:<!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>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!