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 选择器部分整理
Oct 28 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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 Cookie的使用教程详解
2013/06/03 PHP
php代码书写习惯优化小结
2013/06/20 PHP
php实现留言板功能
2017/03/05 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
Javascript调试工具(下载)
2007/01/09 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
房产销售经理职责
2013/12/20 职场文书
元宵晚会主持词
2014/03/25 职场文书
大学生党性分析材料
2014/12/19 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python