使用Vue.js怎么实现点击切换按钮改变内容-创新互联

今天就跟大家聊聊有关使用Vue.js怎么实现点击切换按钮改变内容，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联是一家集网站建设,二道江企业网站建设,二道江品牌网站建设,网站定制,二道江网站建设报价,网络营销,网络优化,二道江网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。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" >
  <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 点击按钮改变页面显示内容的方法

如下所示：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
 <script src="https://cdn.jsdelivr.net/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>
 
 
<script type="text/javascript">
 var vm = new Vue({
  el:'#one',
  data:{
   loginType : 'username'
  },
  methods:{
   change:function(){
    if(this.loginType=='username'){
     this.loginType='email'
    }
    else{
     this.loginType='username'
    }
   }
  }
 })
</script>
 
 
</body>
</html>

看完上述内容，你们对使用Vue.js怎么实现点击切换按钮改变内容有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

文章名称：使用Vue.js怎么实现点击切换按钮改变内容-创新互联
标题路径：https://www.cdcxhl.com/article46/cepchg.html

成都网站建设公司_创新互联，为您提供电子商务、网站导航、品牌网站制作、自适应网站、网站改版、网站维护

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容