快捷導(dǎo)航

Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解

更新時(shí)間：2018年08月22日 16:21:51 作者：Amanda_wmy

今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

代碼實(shí)例：

代碼描述：點(diǎn)擊切換按鈕，來(lái)改變顯示的內(nèi)容，切換不同的單位。flag相當(dāng)于一個(gè)開(kāi)關(guān)，控制開(kāi)關(guān)的改變，來(lái)切換不同的單位。同樣適用于其他的切換內(nèi)容實(shí)例，也可設(shè)置按鈕點(diǎn)擊顯示隱藏等。

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>vue點(diǎn)擊切換改變內(nèi)容</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,//單位切換開(kāi)關(guān)
   btnText:'元/噸',
  }, 
  methods:{ 
   showToggle:function(){ 
    this.flag = !this.flag 
    if(this.flag==true){ 
     this.btnText = "元/噸" 
    }else if(this.flag==false){ 
     this.btnText = "元/方" 
    } 
   } 
  } 
 }) 
 </script> 
</body> 
</html>

拓展知識(shí)：vue 點(diǎn)擊按鈕改變頁(yè)面顯示內(nèi)容的方法

如下所示：

<!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點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
vue中axios解決跨域問(wèn)題和攔截器的使用方法
下面小編就為大家分享一篇vue中axios解決跨域問(wèn)題和攔截器的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
手把手教你如何在vue項(xiàng)目中使用rem布局
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒(méi)有認(rèn)真的來(lái)總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項(xiàng)目中使用rem布局的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
在原生HTML中使用VUE的保姆級(jí)教學(xué)
Vue.js是一種流行的JavaScript框架,用于構(gòu)建交互式的Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于在原生HTML中使用VUE的保姆級(jí)教學(xué),需要的朋友可以參考下
2023-10-10
Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說(shuō)明
這篇文章主要介紹了Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue命令式組件的編寫(xiě)與應(yīng)用小結(jié)
這篇文章主要介紹了Vue命令式組件的編寫(xiě)與應(yīng)用小結(jié),在這篇文章中,我會(huì)帶你了解命令式組件的基本概念,并通過(guò)一些簡(jiǎn)單的示例來(lái)展示它們是如何工作的,需要的朋友可以參考下
2024-03-03
vue3中使用vuedraggable實(shí)現(xiàn)拖拽el-tree數(shù)據(jù)分組功能
這篇文章主要介紹了vue3中使用vuedraggable實(shí)現(xiàn)拖拽el-tree數(shù)據(jù)分組功能,可以實(shí)現(xiàn)單個(gè)拖拽、雙擊添加、按住ctrl鍵實(shí)現(xiàn)多個(gè)添加,或者按住shift鍵實(shí)現(xiàn)范圍添加,添加到框中的數(shù)據(jù),還能拖拽排序,需要的朋友可以參考下
2024-02-02
vue實(shí)現(xiàn)移動(dòng)端彈出鍵盤(pán)功能(防止頁(yè)面fixed布局錯(cuò)亂)
這篇文章主要介紹了vue?解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題,通過(guò)實(shí)例代碼給大家分享解決方案，對(duì)vue?移動(dòng)端彈出鍵盤(pán)相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-04-04
vue+elementui實(shí)現(xiàn)表格多級(jí)表頭效果
這篇文章主要為大家詳細(xì)介紹了vue?+?elementui實(shí)現(xiàn)表格多級(jí)表頭，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04