vue实现选项卡案例

本文实例为大家分享了vue实现选项卡案例的具体代码，供大家参考，具体内容如下

实现步骤

实现静态UI效果

• 用传统的方式实现标签结构和样式

基于数据重构UI效果

• 将静态的结构和样式重构为基于Vue模板语法的形式
• 处理事件绑定和js控制逻辑

声明式编程

• 模板的结构和最终显示的效果基本一致

我们先把每组数据作为对象存储在数组中

list: [{
      id: 1,
      title: 'apple',
      path: 'images/苹果.jpg'
      }, {
         id: 2,
         title: 'orange',
         path: 'images/橘子.jpg'
      }, {
         id: 3,
         title: 'lemon',
         path: 'images/柠檬.jpg'
      }]

然后通过v-for对这个数组进行遍历，取到对应的title值

{{item.title}}

对图片也进行遍历

具体代码如下

    
    
    
    



    

        

            

                
{{item.title}}

            
            

                
            
            

                
            
        
    
    
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。