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 = "您真的确定要删除吗? 请确认!"; 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";