Vue实现菜单切换功能


Posted in Javascript onNovember 08, 2020

本文实例为大家分享了VUE实现菜单内容切换功能,供大家参考,具体内容如下

Vue实现菜单切换功能

Vue实现菜单切换功能

完整代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  *{
  margin: 0px auto;
  padding: 0px;
  }
  #app{
  margin-top: 50px;
  width:400px;
  height:300px;
  border: 1px solid #000000;
  }
  li{
  list-style: none;
  float: left;
  width: 100px;
  height:50px;
  line-height:50px;
  font-size: 18px;
  font-weight: bold;
  background: #EEeeee;
  text-align: center;
  cursor: pointer;
  }
  #wear div{
  width: 400px;
  height: 250px;
  line-height: 250px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  }
  #wear img{
  width: 400px;
  height: 250px;
  }
  .active{
  background: #405c83;
  }
 </style>
 </head>
 <body>
 <div id="app">
  <ul>
  <li v-on:click="searId=1" v-bind:class="{active:searId==1}">1</li> <!--v-bind可以省略-->
  <li @click="searId=2" :class="{active:searId==2}">2</li>
  <li @click="searId=3" :class="{active:searId==3}">3</li>
  <li @click="searId=4" :class="{active:searId==4}">4</li>
  </ul>
  <div id="wear">
  <div v-show="searId==1" ><img src="../img/chun.png"></div>
  <div v-show="searId==2"><img src="../img/xia.png"></div>
  <div v-show="searId==3"><img src="../img/qiu.png"></div>
  <div v-show="searId==4"><img src="../img/dong.png"></div>
  </div>
 </div>
 </body>
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
  el:"#app",
  data:{
  searId:1 //第一个为默认
  }
 })
 </script>
</html>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

Javascript 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
js正则表达式简单校验方法
Jan 03 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 #Javascript
JS实现手风琴特效
Nov 08 #Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 #Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 #Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 #Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 #Javascript
解决Vue watch里调用方法的坑
Nov 07 #Javascript
You might like
全文搜索和替换
2006/10/09 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
bootstrap改变按钮加载状态
2014/12/01 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python3标准库总结
2019/02/19 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
python实现UDP协议下的文件传输
2020/03/20 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
委托书如何写
2014/08/30 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Java中的随机数Random
2022/03/17 Java/Android