技術標籤：Vue實現tab點選切換vuejshtmlvue.js

Vue實現Tab點選切換取消刪除等功能

今天給大家分享一下本人經常用到的Tab切換功能。主要邏輯就是資料的新增和刪除並且判斷樣式。廢話不多說直接上程式碼

演示效果

全部程式碼

<template>
  <div style="width: 70%;margin: 60px auto;font-size: 17px;">
    <div class="title">
      <div>技術棧</div>
      <
 
div style="margin-left: 25px;" class="tab">
        <span
          v-for="(item,index) in data"
          :key="index"
          @click="overlaySelected(item,index)"
          :class="{'select':item.state}"
        >{{item.name}}</
 
span>
      </div>
    </div>
    <div class="title">
      <div
        v-for="(item,index) in selectList"
        :key="index"
        style="margin-right: 20px;position: relative;"
      >
        <div
          style="padding
 
: 6px 18px;border-radius: 6px;border: 2px solid #4395ff;color: #4395ff;"
        >{{item.name}}</div>
        <span class="delete" @click="deleteData(item,index)">x</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tab",
  data() {
    return {
      keyIndex: null,
      data: [
        { name: "html", state: false },
        { name: "css", state: false },
        { name: "JavaScript", state: false },
        { name: "Vue", state: false },
        { name: "elmUI", state: false },
        { name: "React", state: false },
        { name: "Npm", state: false },
        { name: "Node.js", state: false },
        { name: "Fultter", state: false },
      ],
      selectList: [],
    };
  },
  methods: {
    //選中事件
    overlaySelected(item) {
      item.state = !item.state;
      const newarray = [];
      for (var i = 0; i < this.data.length; i++) {
        if (this.data[i].state) {
          newarray.push(this.data[i]);
        }
      }
      this.selectList = newarray;
    },

    //刪除事件
    deleteData(item, index) {
      this.selectList.splice(index, 1);
      for (var i = 0; i < this.data.length; i++) {
        this.data[i].name == item.name ? this.data[i].state = false : "";
      }
    },
  },
  mounted() {},
  created: function () {},
};
</script>

<style scoped>
.title {
  margin-top: 20px;
  display: flex;
}

.tab span {
  border: 2px solid;
  padding: 6px 18px;
  border-radius: 6px;
  margin-right: 20px;
  cursor: pointer;
}
.select {
  background-color: #4395ff;
  border-color: #4395ff !important;
  color: #fff;
}
.delete {
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 15px;
  border: 2px solid;
  border-radius: 73px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #e33232;
}
</style>

★（點選選中後觸發方法）

//選中事件
    overlaySelected(item) {
      item.state = !item.state;
      const newarray = [];
      for (var i = 0; i < this.data.length; i++) {
        if (this.data[i].state) {
          newarray.push(this.data[i]);
        }
      }
      this.selectList = newarray;
    },

★（點選刪除觸發方法）

    deleteData(item,index){
      this.selectList.splice(index,1);
      for(var i = 0 ; i < this.data.length; i++){
        this.data[i].name == item.selectName ? this.data[i].state = false : ''
      }
    }