vue点击切换tab选项

简介: vue点击切换tab选项
<div v-for="i in positionLIst" :key="i.id" :class="{'addDiv':addId==i.id}" @click="leftBoxClick(i.id)">
      {{i.name}} ({{i.number}})</div>
    <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" >
      {{tag}}
    </el-tag>
return {
      addId: 1,
      positionLIst: [{
          name: '前端',
          number: '2',
          id: '1',
        },
        {
          name: '产品经理',
          number: '5',
          id: '2',
        },
        {
          name: 'UI设计师',
          number: '8',
          id: '3',
        },
        {
          name: 'Android工程师',
          number: '13',
          id: '4',
        },
        {
          name: '商务',
          number: '46',
          id: '5',
        },
        {
          name: 'IOS工程师',
          number: '10',
          id: '6',
        }, {
          name: 'IOS工程师',
          number: '10',
          id: '7',
        }, {
          name: 'IOS工程师',
          number: '10',
          id: '8',
        }, {
          name: 'IOS工程师',
          number: '10',
          id: '9',
        }, {
          name: 'IOS工程师',
          number: '10',
          id: '10',
        }, {
          name: 'IOS工程师',
          number: '10',
          id: '11',
        }, {
          name: 'IOS工程师',
          number: '10',
          id: '12',
        }, {
          name: 'IOS工程师',
          number: '10',
          id: '13',
        },
      ],
      dynamicTags: [],
    }
    methods: {
      // 点击选择标签
      leftBoxClick(id) {
        this.addId = id;
        console.log(this.addId, '204')
        this.lableData(1)
      },
      lableData(){
        if(this.addId == 1){
          this.dynamicTags = ['挺好', '态度认真', '效率高']
        }else{
          this.dynamicTags = ['最佳人选', '高潜人才', '待沟通']
        }
      },
    }
<style type="text/css">
      .addDiv {
        color: #3377FF;
      }
</style>

相关文章
|
21天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
21天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
20 1
|
21天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
27 1
|
21天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
21天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1058 0
|
23天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
24天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
27 1
vue学习第一章
|
24天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
24 1
vue学习第三章
|
25天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章