常用的一些语法 日常更新

1. 禁用，元素设置为不可点击

<div style="pointer-events: none;">
    <a href="www.baidu.com">测试</a>    
</div>

2.1 类名操作语法

:class="[type == '1'?'active u-order-desc':'no_active u-order-desc']" 

2.2 id和bigTypeId相同 class则添加了active类名

:class="{ active:item.id == bigTypeId}"

3. v-for的使用

v-for="(item, index) in list"  :key="index"

 4. 假数据 键值对

playerList: [
        {
          0: {
            active_id: 35,
            group_id: null,
            iconNum: 1,
            is_close: 1,
            is_online_sign: 1,
            is_show: 1,
            player_id: 156,
            player_img: "/img/14.png",
          }
        },
        {
          1: {
            active_id: 35,
            group_id: null,
            iconNum: 2,
            is_close: 1,
            is_online_sign: 1,
            is_show: 1,
            player_id: 156,
             player_img: "/img/14.png",
          }
        },
        {
          2: {
            active_id: 35,
            group_id: null,
            iconNum: 3,
            is_close: 1,
            is_online_sign: 1,
            is_show: 1,
            player_id: 156,
             player_img: "/img/14.png",
          }
        }
      ]

 5. Vue模板

<template>
  <div></div>
</template>

<script>
import votesetpage from "./components/votesetpage.vue";
export default {
  components: {
    votesetpage
  },
  data() {
    return {
      active_id: this.$route.query.id,
      prevalue: true,
      pages: {
        current_page: 1,
        last_page: 1,
        per_page: 6,
        total: 6
      },
      playerList: [
        {
          0: {
            active_id: 35,
            group_id: null,
            iconNum: 1,
            is_close: 1,
            is_online_sign: 1,
            is_show: 1,
            player_id: 156,
            player_img: "/img/14.png",
            player_vote: 0
          }
        },
        {
          1: {
            active_id: 35,
            group_id: null,
            iconNum: 2,
            is_close: 1,
            is_online_sign: 1,
            is_show: 1,
            player_id: 156,
            player_img: "/img/14.png",
            player_vote: 0
          }
        },
        {
          2: {
            active_id: 35,
            group_id: null,
            iconNum: 3,
            is_close: 1,
            is_online_sign: 1,
            is_show: 1,
            player_id: 156,
            player_img: "/img/14.png",
            player_vote: 50
          }
        },
        {
          3: {
            active_id: 35,
            group_id: null,
            iconNum: 4,
            is_close: 1,
            is_online_sign: 1,
            is_show: 1,
            player_id: 156,
            player_img: "/img/14.png",
            player_vote: 0
          }
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      // this.activeType = tab.name;
    },
    prevChange() {}
  },
  mounted() {
    this.getPlayerRank();
  },
  computed: {
    // 选手票数
    sort_player_vote() {
      return 5;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

 6. confirm的使用

  // 删除专题
    delTable() {
      var obj = document.getElementById("el_table");
      var msg = "您真的确定要删除吗？\n\n请确认！";
      if (confirm(msg) == true) {
        return obj.parentNode.removeChild(obj);
      } else {
        return false;
      }
    },

 7. 引入api接口方法 和组件 语法

import { ActiveQr } from "@/api/active.js";
import noSpecial from "./components/noSpecial";