console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
	<div id="app">
        {{a}}
		<div class="circle">
			<ul class="circle-ul">
				<li v-for="(item) of classList" :key="item.id" class="circle-li">
					<div v-on:click="changeList(item.id)" class="changeBorder" value="change!">
						<img :src="item.coverImg" style="width: 100px;height: 100px;padding-top: 5px;" alt />
        <div class="topic-shade">
          <div class="shade"><img src="@/assets/createtopic_pic/checkbox.png" style="width: 14px;height: 14px;" alt /></div>
        </div>
      </div>
    </li> 
  </ul>
</div>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js">

</script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>
<script>
	new Vue({
  el: "#app",
  data() {
    return {
      a:true,
      classList: [
        {
          id: "001",
          coverImg:'https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/34fae6cd7b899e5195d5334f4da7d933c8950d15.jpg'
        },
        {
          id: "002",
 coverImg:'https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/34fae6cd7b899e5195d5334f4da7d933c8950d15.jpg'
        },
        {
          id: "003",
 coverImg:'https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/34fae6cd7b899e5195d5334f4da7d933c8950d15.jpg'
        },
        {
          id: "004",
 coverImg:'https://gss0.bdstatic.com/70cFfyinKgQIm2_p8IuM_a/daf/pic/item/34fae6cd7b899e5195d5334f4da7d933c8950d15.jpg'
        }
      ]
    };
  },
  methods: {
    changeList(id){
      if(this.a == id){
          this.a =! this.a;
      }else{
          this.a =id;
      } 
    }
  }
})

</script>
<style lang="stylus" scoped>
.circle{
  position: relative;
  width: 632px;
  left: 15px;
}
.circle-ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 532px;
  padding: 0;
  margin: 14px 0 0 50px;
}
.circle-li {
  margin-right: 20px;
  list-style: none;
  margin-bottom: 20px;
   
}
.topic-shade
  display: none;
.changeBorder 
  width: 114px;
  height: 114px;
  position: relative;
  cursor: pointer;
  border: 1px dashed #969696; 
  margin: -1px -8px 0 -8px;
  .topic-shade
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 123.5px;
    right: 0;
    bottom: 0;
    left: 86px;
    .shade
      margin-bottom: 4px;     
</style>

</html>
本项目引用的自定义外部资源

mootools-core.js