vue點(diǎn)擊按鈕實(shí)現(xiàn)簡(jiǎn)單頁面的切換

更新時(shí)間：2020年09月08日 08:24:22 作者：丁七歲

這篇文章主要為大家詳細(xì)介紹了vue點(diǎn)擊按鈕實(shí)現(xiàn)簡(jiǎn)單頁面的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue點(diǎn)擊按鈕實(shí)現(xiàn)頁面切換的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div id="app">
  <h3 v-show="tab==1">首頁 </h3>
  <h3 v-show="tab==2">新聞頁</h3>
  <h3 v-show="tab==3">個(gè)人頁</h3>
  
  
  <button @click="tabChange" data-id="1">首頁</button>
  <button @click="tabChange" data-id="2">新聞頁</button>
  <button @click="tabChange" data-id="3">個(gè)人頁</button>
 </div>
 <script type="text/javascript">
  let app = new Vue({
  el:"#app",
  data:{
   tab:1
  },
  methods:{
   tabChange:function(e){
   let tabid = e.target.dataset.id
   this.tab = tabid
   }
  }
  })
 </script> 
 </body>
</html>

寫這個(gè)要記得下載vue.js

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中jsencrypt與base64加密解密的實(shí)用流程
vue項(xiàng)目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實(shí)用流程,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-10-10
Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng):偵聽屬性,下面這篇文章主要給大家介紹了關(guān)于Vue踩坑之Vue?Watch方法不能監(jiān)聽到數(shù)組或?qū)ο笾档母淖兊南嚓P(guān)資料,需要的朋友可以參考下
2022-04-04

vue百度地圖 + 定位的詳解

這篇文章主要介紹了vue百度地圖 + 定位的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

2019-05-05

vue3中?provide?和?inject?用法及原理

這篇文章主要介紹vue3中?provide?和?inject?用法及原理，provide?和?inject可以?解決多次組件傳遞數(shù)據(jù)的問題，下面文章是具體的用法和實(shí)現(xiàn)原理,具有一定的參考價(jià)值，需要的朋友可以參考一下，希望對(duì)大家有所幫助

2021-11-11

Vue實(shí)現(xiàn)當(dāng)前頁面刷新的七種方法總結(jié)

大家在vue項(xiàng)目中當(dāng)刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁面可以重新刷新，但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,所以本文就給大家分享了七種vue實(shí)現(xiàn)當(dāng)前頁面刷新的方法,需要的朋友可以參考下

2023-07-07