vue點擊按鈕實現(xiàn)簡單頁面的切換
更新時間：2020年09月08日 08:24:22 作者：丁七歲
這篇文章主要為大家詳細介紹了vue點擊按鈕實現(xiàn)簡單頁面的切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue點擊按鈕實現(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">個人頁</h3>
<button @click="tabChange" data-id="1">首頁</button>
<button @click="tabChange" data-id="2">新聞頁</button>
<button @click="tabChange" data-id="3">個人頁</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>
寫這個要記得下載vue.js
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實用流程,具有一定的參考價值,感興趣的可以了解一下2023-10-10
Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue百度地圖 + 定位的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05 
這篇文章主要介紹vue3中?provide?和?inject?用法及原理，provide?和?inject可以?解決多次組件傳遞數(shù)據(jù)的問題，下面文章是具體的用法和實現(xiàn)原理,具有一定的參考價值，需要的朋友可以參考一下，希望對大家有所幫助
2021-11-11 
大家在vue項目中當刪除或者增加一條記錄的時候希望當前頁面可以重新刷新，但是vue框架自帶的router是不支持刷新當前頁面功能,所以本文就給大家分享了七種vue實現(xiàn)當前頁面刷新的方法,需要的朋友可以參考下
2023-07-07 
本篇文章主要介紹了Vue.js組件，組件系統(tǒng)是Vue.js其中一個重要的概念，具有一定的參考價值，有需要的可以了解一下。
2016-12-12 
webpack4+Vue搭建自己的Vue-cli項目過程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對于vue-cli的強大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧
2018-08-08 
這篇文章主要介紹了vue點擊頁面空白處實現(xiàn)保存功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-11-11 
這篇文章主要介紹了vue項目設(shè)置活性字體過程(自適應字體大小)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09