用Vue框架怎么制作一个基本的菜单切换效果-群英

上一篇：用Vue框架怎么制作一个顶部菜单栏，思路是什么下一篇：如何用原生JS写一个五子棋游戏，代码是什么

这篇文章主要介绍“用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框架怎么制作一个基本的菜单切换效果”的文章就介绍到这了,更多相关用Vue框架怎么制作一个基本的菜单切换效果内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！