[Vue.js] 基础 -- 案例之Tab选项卡

实现效果

实现步骤

实现静态UI效果
- 用传统的方式实现标签结构和样式
基于数据重构UI效果
- 将静态的结构和样式重构为基于Vue模板语法的形式
- 处理事件绑定和js控制逻辑
声明式编程
- 模板的结构和最终显示的效果基本一致

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.tab ul {overflow: hidden;padding: 0;margin: 0;}.tab ul li {box-sizing: border-box;padding: 0;float: left;width: 100px;height: 45px;line-height: 45px;list-style: none;text-align: center;border-top: 1px solid blue;border-right: 1px solid blue;cursor: pointer;}.tab ul li:first-child {border-left: 1px solid blue;}.tab ul li.active {background-color: orange;}.tab div {width: 500px;height: 300px;display: none;text-align: center;font-size: 30px;line-height: 300px;border: 1px solid blue;border-top: 0px;overflow: hidden;}.tab div.current {display: block;}</style>
</head>
<body>
<div id="app"><div class="tab"><ul><li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li></ul><div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'><!--      属性绑定      --><img :src="item.path"></div></div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el: '#app',data: {currentIndex: 0, // 选项卡当前的索引list: [{id: 1,title: '动漫--01',path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1430896917,3626279479&fm=26&gp=0.jpg'},{id: 2,title: '动漫--02',path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3591372777,3342280201&fm=26&gp=0.jpg'},{id: 3,title: '动漫--03',path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1964875,4190908564&fm=26&gp=0.jpg'}]},methods: {change: function(index){// 在这里实现选项卡切换操作：本质就是操作类名// 如何操作类名？就是通过currentIndexthis.currentIndex = index;}}});
</script>
</body>
</html>

[Vue.js] 基础 -- 案例之Tab选项卡相关推荐

Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
js小案例：实现选项卡功能
js小案例:实现选项卡功能 html部分代码 <button>1</button><button>2</button><button>3&l ...
JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
vue.js 基础学习 11天 -- 转载某培训机构学习资料（转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
[Vue.js] 深入 -- 案例 - 购物车
案例 - 购物车按照组件化方式实现业务需求根据业务功能进行组件化划分标题组件(展示文本) 列表组件(列表展示.商品数量变更.商品删除) 结算组件(计算商品总额) 功能实现步骤实现整体布局和样式 ...
[Vue.js] 基础 -- Vue常用特性
Vue常用特性常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期表单操作基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 rad ...
vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...

[Vue.js] 基础 -- 案例之Tab选项卡

实现效果

实现步骤

[Vue.js] 基础 -- 案例之Tab选项卡相关推荐

最新文章

热门文章