vue-demo1-table栏切换

ゝ一世哀愁。 2021-08-13 20:05 333阅读 0赞

针对的知识点: vue的基本使用，模板语法

1.  vue指令
2.  vue事件绑定
3.  vue属性绑定
4.  vue循环

原始案例选项卡html结构

<div id="app">
     <div class="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样式

.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;
            }
            
            .tab div.current { 
                display: block;
            }
        </style>

提供的数据

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' }]

现在要将原始的html写法改造成vue模板渲染的方法  
1：引入vue.js

2:编写vue的基本模板

var vm = new Vue({ 
    el:"#app",
    data:{ },
    methods:{ }
    })

3:开始vue模板渲染的所有完整代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            .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;
            }
            
            .tab div.current { 
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
    
            <div class="tab">
                
                <ul>
                    <li 
                     @click="change(index)" 
                     :class="currentIndex == index ? 'active' : ''" :key="item.id" 
                     v-for="(item,index) in list" v-text='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>
    </body>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({ 
            el: '#app',
            data: { 
                currentIndex: 0,
                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'
                }]
            },
            methods: { 
                change: function(index) { 
                    this.currentIndex = index
                }
            },
        })
    </script>
    
    </html>

解释说明

*  将数据存放到vue实例的data上
 *  通过v-for对数据进行循环
 *  通过差值表达式进行渲染
 *  通过绑定事件和绑定属性对table的颜色和每一个图片进行当前选中状态的操作

**table切换的关键点**  
1：自定义一个下标currentIndex，通过点击事件，为自定义事件赋值  
2：利用属性绑定，将赋值后的currentIndex和当前图片或table用三元表达式对比，来决定是active还是current

效果图  
![在这里插入图片描述][20191203150213875.gif]

[20191203150213875.gif]: /images/20210813/3b25da4bb42a40fa81883cca33120da0.png