脚本宝典收集整理的这篇文章主要介绍了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>
推荐学习:php培训
以上就是vue.js如何实现单击改变内容的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue.js如何实现单击改变内容全部内容,希望文章能够帮你解决vue.js如何实现单击改变内容所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。