vue学习笔记-9-tab选项卡小案例

一，自己写的：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 400px;margin: 200px auto;border: 1px solid #ccc;}.box>ul:first-child{display: flex;justify-content: space-between;}.box>ul:first-child>li{background: orange;line-height: 40px;width: 100px;text-align: center;color: #fff;font-size: 14px;}.box>ul:first-child>li:hover{background: rgba(255,165,0,0.5);}</style></head><body><div id="app"><div class="box"><ul><li @mouseenter="mouseenter1">第一张</li><li @mouseenter="mouseenter2">第二张</li><li @mouseenter="mouseenter3">第三张</li><li @mouseenter="mouseenter4">第四张</li></ul><ul><li v-if="val==1"><img src="img/1.jpg"></li><li v-else-if="val==2"><img src="img/2.jpg"></li><li v-else-if="val==3"><img src="img/3.jpeg"></li><li v-else><img src="img/4.jpg"></li></ul></div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{val:1},methods:{mouseenter1:function(){this.val=1},mouseenter2:function(){this.val=2},mouseenter3:function(){this.val=3},mouseenter4:function(){this.val=4}}})</script></body>
</html>

实现的效果：

二，实际案例中的写法：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 400px;margin: 200px auto;border: 1px solid #ccc;}.box>ul:first-child{display: flex;justify-content: space-between;}.box>ul:first-child>li{background: orange;line-height: 40px;width: 100px;text-align: center;color: #fff;font-size: 14px;}.box>ul:first-child>li:hover{background: rgba(255,165,0,0.5);}.box>ul:last-child>li{display: none;}.box>ul:last-child>.current{display: block;}</style></head><body><div id="app"><div class="box"><ul><li @mouseenter="mouseenter(index)" v-for="(item,index) in list">{{item.title}}</li><!-- 通过mouseenter(index)把index参数传入，获取哪个被点击 --></ul><ul><li v-bind:class=currenIndex==index?"current":""   v-for="(item,index) in list"><img :src="item.path"></li><!-- 三目运算，给index对应的img添加显示的样式 --></ul></div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{currenIndex: 0,list:[{id:1,title:"第一张",path:"img/1.jpg"},{id:2,title:"第二张",path:"img/2.jpg"},{id:3,title:"第三张",path:"img/3.jpeg"},{id:4,title:"第四张",path:"img/4.jpg"}]},methods:{mouseenter:function(index){this.currenIndex=index//这是本案例的重点，把按钮处的索引做参数导入，//由此建立起两个模块间的联系（可以知道哪个被点击，哪个被就应该对应显示）}}})</script></body>
</html>

vue学习笔记-9-tab选项卡小案例相关推荐

Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
VUE学习笔记------奕长苏
VUE学习笔记------奕长苏一.引言二.视图和数据的双向绑定 - - - v-model 三.组件 - - - component 四.其它一.引言本文为个人在学习vue时总结的学习笔记, ...
Vue学习笔记(十一)
1.Vue学习笔记(十一) 文章目录 1.Vue学习笔记(十一) 1.1Vue_配置代理_方式 1.1.0演示问题 1.1.1运行node server1 1.1.2运行node server2 1. ...
Python学习笔记7：实操案例四（支付密码的验证，模拟QQ账号登录，商品价格竞猜，星座看运势）
Python学习笔记7:实操案例四(支付密码的验证,模拟QQ账号登录,商品价格竞猜,星座看运势) 1.支付密码的验证: 这个主要就是调用isdigit()函数判断字符串是不是全是数字组成. pwd=i ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...

vue学习笔记-9-tab选项卡小案例

一，自己写的：

vue学习笔记-9-tab选项卡小案例相关推荐

最新文章

热门文章