vue点击按钮实现简单页面的切换


Posted in Javascript onSeptember 08, 2020

本文实例为大家分享了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点击按钮实现简单页面的切换

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
页面点击小红心js实现代码
May 26 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 #Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 #Javascript
vue a标签点击实现赋值方式
Sep 07 #Javascript
JavaScript实现多球运动效果
Sep 07 #Javascript
JavaScript实现世界各地时间显示
Sep 07 #Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 #Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 #Javascript
You might like
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
js 单引号 传递方法
2009/06/22 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
Python简单日志处理类分享
2015/02/14 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
作风整顿剖析材料
2014/09/30 职场文书
邀请书模板
2015/02/02 职场文书