潍坊百度微信小程序_Vue.js点击切换按钮改变内容

发布时间:2021-01-08 13:14 作者:jianzhan

摘要: Vue.js点一下转换按键更改內容的案例解读 今日网编就为大伙儿共享一篇Vue.js点一下转换按键更改內容的案例解读,具备非常好的参照使用价值,期待对大伙儿有一定的协助。一起

Vue.js点击切换按钮改变内容的实例讲解       今天小编就为大家分享一篇Vue.js点击切换按钮改变内容的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

代码实例:

代码描述:点击切换按钮,来改变显示的内容,切换不同的单位。flag相当于一个开关,控制开关的改变,来切换不同的单位。同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等。

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title vue点击切换改变内容 /title 
 script src="vue/2.2.2/vue.min.js" /script 
 /head 
 body 
 Col span="2" 
 p v-text="btnText" v-show='flag==true' /p 
 p v-text="btnText" v-show='flag==false' /p 
 /Col 
 Col span='2' 
 span @click='switchChange' 
 Icon type="arrow-swap" /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 点击按钮改变页面显示内容的方法

如下所示:

 !DOCTYPE html 
 html lang="en" xmlns:v-bind="1999/xhtml" xmlns:v-on="1999/xhtml" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 script src="npm/.0/dist/axios.min.js" /script 
 script src="npm/.1/lodash.min.js" /script 
 script src="npm/vue" /script 
 /head 
 body 
 div id="one" 
 template v-if="loginType === 'username'" 
 label Username /label 
 input placeholder="Enter your username" key="username-input" 
 /template 
 template v-else 
 label Email /label 
 input placeholder="Enter your email address" key="email-input" 
 /template 
 button @click="change" change /button 
 /div 

以上这篇Vue.js点击切换按钮改变内容的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


  • 外包公司做企业网站都包

    企业网站建设业务外包企业为公司官方网站制作要从四大方面着手: 最先,官方网站企业网站建设生产制造计划方案方案策划。 第二,公司官方网站好看的页面设计方案。 第三,公司

  • 国内外哪些网站或企业的

    弥补一个我国的十分好的网上线上在线客服系统软件手机软件:一洽智能化化线上在线客服,全身心网上线上在线客服生产制造制造行业十好多年,十分技术性技术专业,技术性性资产

  • 不懂技术教你5分钟制作一

    一些企业或自己急缺网站来提高销售市场市场销售方法,一般来说基本建设网站都是依据建设网站公司来开展,开展企业网站建设的时间一般都是七天空下,快一些的话也务必在三天内

  • 企业网站认证有什么好处

    公司网站验证有哪些益处?网站认证 重要应用使用价值:一、在我国级权威性性认证我国国家工信部、商务接待招待部、国资企业、改办委四部委局局实际具体指导,非第三方企业定级

  • 怎样在静态网页中插入视

    如何工作中中如需在 HTML5 中显示信息信息内容视频,您所有务必的是: