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 相关文章推荐
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
js 操作符汇总
Nov 08 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
Js apply方法详解
Feb 16 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
JS闭包原理与应用经典示例
Dec 20 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
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
Vue动态生成表格的行和列
2019/07/18 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python+mysql实现简单的web程序
2014/09/11 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python range实例用法分享
2020/02/06 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
社区中秋节活动方案
2014/01/29 职场文书
教师考核评语大全
2014/12/31 职场文书
工作失职检讨书范文
2015/05/05 职场文书
公司新员工欢迎词
2015/09/30 职场文书
初中化学教学反思
2016/02/22 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
python库sklearn常用操作
2021/08/23 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
CentOS MySql8 远程连接实战
2022/04/19 MySQL