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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了React Diff算法不采用Vue双端对比算法原因详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
在本教程中，我们将探讨如何在浏览器中使用 JavaScript 库来操作图片，为服务器上的存储做准备，并在 Web 程序中使用。我们将使用 Vue.js 而不是原生 JavaScript来完成此操作,需要的朋友可以参考下2019-06-06
这篇文章主要为大家介绍了前端高效配置化vue2 element ui省时又省力,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue在线动态切换主题色方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了Vue项目如何根据不同运行环境打包项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了详解vue-cli下ESlint 配置说明，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3中Fragment特性的一个bug，需要留意的注意事项示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2024-01-01
这篇文章主要介绍了vue如何实现简易流程图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue3移动端嵌入pdf的多种方法小结,使用embed嵌入有好处也有缺点,本文给大家讲解的非常详细,需要的朋友可以参考下2023-10-10
最新评论