vue点击按钮实现简单页面的切换
更新时间：2020年09月08日 08:24:22 作者：丁七岁
这篇文章主要为大家详细介绍了vue点击按钮实现简单页面的切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue点击按钮实现页面切换的具体代码，供大家参考，具体内容如下
<!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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue项目里面使用到的加密和解密的方法,本文主要介绍了vue中jsencrypt与base64加密解密的实用流程,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
Vue启动失败报错:Module not found: Error: Can‘t resolve &apos
这篇文章主要给大家介绍了关于Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-03-03
Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性,下面这篇文章主要给大家介绍了关于Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue百度地图 + 定位的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍vue3中 provide 和 inject 用法及原理，provide 和 inject可以 解决多次组件传递数据的问题，下面文章是具体的用法和实现原理,具有一定的参考价值，需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
大家在vue项目中当删除或者增加一条记录的时候希望当前页面可以重新刷新，但是vue框架自带的router是不支持刷新当前页面功能,所以本文就给大家分享了七种vue实现当前页面刷新的方法,需要的朋友可以参考下2023-07-07
本篇文章主要介绍了Vue.js组件，组件系统是Vue.js其中一个重要的概念，具有一定的参考价值，有需要的可以了解一下。2016-12-12
webpack4+Vue搭建自己的Vue-cli项目过程分享
这篇文章主要介绍了webpack4+Vue搭建自己的Vue-cli，对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
这篇文章主要介绍了vue点击页面空白处实现保存功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue项目设置活性字体过程(自适应字体大小)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论