Vue实现导航栏切换

使用Vue

@mouseenter 鼠标移入事件

@mouseout鼠标移出事件

实现导航栏鼠标移入移出效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<script src="../public/vue.min.js"></script>
<style>ul li{width: 80px;background-color: red;color: white;list-style: none;}ul li:hover{background-color: white;color: red;}.d1{width: 400px;height: 400px;background-color: green;position: fixed;left: 126px;top: 16px;display: none;}.d2{display: block;}</style>
<body><div id="app"><ul><li v-for="item in array" @mouseover="item.active = item.active?false:true"  @mouseout="item.active=item.active?false:true">{{item.titleName}}<div :class="{d1:true,d2:item.active}"><div v-for="arr in item.names"><h2>{{arr.name}}</h2><h3>{{arr.smallName}}</h3></div></div></li></ul></div><script>new Vue({el:"#app",data:{array:[{active:false,titleName: "美容美妆",names: [{name: "护肤",smallName: ["洁面", "口红"]}],},{active:false,titleName: "儿童用品",names: [{name: "奶粉",smallName: ["锦纶", "科迪"]}],},{active:false,titleName: "家居",names: [{name: "扫把",smallName: ["三星", "华为"]}],},]}})</script>
</body>
</html>

Vue实现导航栏切换相关推荐

点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
Android底部导航栏切换页面填坑
** Android底部导航栏切换页面填坑 ** 这个效果的实现关键点就是给选项赋予两种状态,focused和normal,在主程序中用监听判断是否被选中,就给被选中的选项设focused为true, ...
Android中的底部导航栏切换TabContainerView
前言:在GitHub上看到一个框架,实现底部导航栏切换,感觉不错,就在这里总结一下. 参考:https://www.jianshu.com/p/9aaff43bbf9f https://github. ...
Axure RP 如何实现导航栏切换页面——母版
网站的导航功能是一个网站的最基本也是最为重要的功能之一,当我们在做项目时,点击导航按钮实现跳转页面,并且每次点击跳转都会有交互,运用母版,可大量减少设计时间,实现跳转页面. 以知乎网站为例: 总结为两 ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
仿抖音短视频APP源码，顶部导航栏切换详解
仿抖音短视频APP源码,顶部导航栏切换详解的相关代码 class DaoHangNan extends StatefulWidget //继承StatefulWidget{TabController ...
导航栏切换—云南旅游相册
通过使用jQuery库来实现导航栏切换:分析如下: 1.首先建立一个就绪函数ready函数,把所有的jQuery内容都写到这个函数中. 2.选中按钮元素并绑定单击事件 3.选中img图片,通过eq() ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...

Vue实现导航栏切换

Vue实现导航栏切换相关推荐

最新文章

热门文章