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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JS查看对象功能代码
Apr 25 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
JS中的作用域链
Mar 01 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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
关于PHP堆栈与列队的学习
2013/06/21 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
清除输入框内的空格
2016/12/21 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Python字符串处理函数简明总结
2015/04/13 Python
python处理大数字的方法
2015/05/27 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python实现的config文件读写功能示例
2019/09/24 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
python连接mongodb集群方法详解
2020/02/13 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Django用户身份验证完成示例代码
2020/04/03 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
请假条怎么写
2014/04/10 职场文书
学校宣传标语
2014/06/18 职场文书
Go 语言结构实例分析
2021/07/04 Golang
golang为什么要统一错误处理
2022/04/03 Golang
python获取带有返回值的多线程
2022/05/02 Python