vue点击按钮实现简单页面的切换_vue点击按钮跳转到另一个页面,点击按钮跳转到id - CSDN文库

193 浏览量更新于2023-03-03 评论 2 收藏 35KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38746515

粉丝: 15
资源: 945

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈