这篇文章主要介绍了vue.js怎么实现单击改变内容，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
vue.js实现单击改变内容的方法：【new Vue({el:"#example",data:{flag:true,btnText:'元/吨',},methods:{showToggle:function(){this.flag ...】。
本文操作环境：windows10系统、vue.js 2.9、thinkpad t480电脑。
我们要实现点击切换按钮，来改变显示的内容，切换不同的单位。
在下面的代码中flag相当于一个开关，通过控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。
具体实现代码：
<!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>
感谢你能够认真阅读完这篇文章，希望小编分享的“vue.js怎么实现单击改变内容”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
