当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue.js点击切换按钮改变内容的实例讲解

Vue.js点击切换按钮改变内容的实例讲解

2018年09月23日  | 移动技术网IT编程  | 我要评论

河南专升本录取时间,重庆市北碚区人力资源和社会保障网,最佳听众mv

代码实例：

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

如下所示：

<!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点击切换按钮改变内容的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网