点击Tab栏，切换图片，Vue小的demo！！

学习目标：

提示：独立完成此案例，实现功能点击Tab栏切换图片。

---

页面基本布局以及样式：

页面基本布局

html
<div id="app">
   <div class="tab">
        <!--  tab栏  -->
        <ul>
            <li class="active">apple</li>
            <li class="">orange</li>
            <li class="">lemon</li>
        </ul>
          <!--  对应显示的图片 -->
        <div class="current"><img src="img/apple.png"></div>
        <div class=""><img src="img/orange.png"></div>
        <div class=""><img src="img/lemon.png"></div>
    </div>
</div>

页面样式

css
* {
     
 margin: 0;
  padding: 0;
}

.tab ul {
     
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.tab ul li {
     
  float: left;
  list-style: none;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  /* background-color: aqua; */
  border: 1px solid red;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

.tab ul li.active {
     
  background-color: aqua
}

.tab div {
     
  width: 500px;
  height: 300px;
  display: none;
}

.tab div.current {
     
  display: block;
}

即将渲染的数据

数据
 list: [{
     
 	id: 1,
        title: 'apple',
        path: 'img/apple.png'
    }, {
     
        id: 2,
        title: 'orange',
        path: 'img/orange.png'
    }, {
     
        id: 3,
        title: 'lemon',
        path: 'img/lemon.png'
}]

---

逻辑部分

1.将数据中的title和path通过循环v-for的方式渲染到tab栏中，和图片中

// tab栏区域
<ul>
	<li v-for = "(item , index) in list" :key="id">{
     {
     item.title}}<li>
</ul>

// 图片区域
<div v-for = "(item , index) in list" :key="id"><img :src="item.path"></div>

2.控制tab栏的高亮，以及当前展示的图片
此时需要定义一个currentIndex : 0，用来表示当前tab栏的索引值。tab栏高亮通过绑定active样式来实现。

<ul>
	<li 
		v-for = "(item , index) in list" 
		:key="id"
		// 动态绑定样式，三元表达式
		:class = 'currentIndex == index ? "active" : "" '
	>{
     {
     item.title}}<li>
</ul>

同样控制图片的展示

<div 
	v-for = "(item , index) in list" 
	:key="id"
	:class = 'currentIndex == index ? "current" : "" '>
	<img :src="item.path">
</div>

3.点击tab栏实现栏切换，以及图片的显示

<ul>
	<li 
		v-for = "(item , index) in list" 
		:key="id"
		:class = 'currentIndex == index ? "active" : "" '
		@click = "change(index)"
	>{
     {
     item.title}}<li>
</ul>

// 当点击按钮时，触发change事件，将当前index修改为传入的index，也就是最新的index值。
// 修改了currentIndex值，就可以改变tab栏和图片的样式
methods:{
     
	change: function(index) {
     
		this.currentIndex= index
	}
}

总结

1.将数据绑定到title和src上。
2.创建currentIndex，表示当前显示的tab栏和id。通过动态绑定样式控制图片的显示和隐藏。
3.绑定点击事件，修改currentIndex，从而改变tab栏和图片的显示和隐藏。