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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
js Proxy的原理详解
May 25 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/04/29 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
青年创业培训欢迎词
2014/01/08 职场文书
美发活动策划书
2014/01/14 职场文书
《月迹》教学反思
2014/02/19 职场文书
爱护公物标语
2014/06/24 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
入党心得体会
2019/06/20 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL