<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<title>Document</title>
//vue应用
1 <body>
2 <div id="App">
3 <div style="display: flex;justify-content: center">
4 老师:<span>{{add}}</span>
5 </div>
6 <input type="text" v-model="name" > <button @click="adds()" > 添加班级成员 </button>
7 <div class="name-box">
8 <div :class="{name:true, active:list.includes(value)}" v-for="(value,index) of classList">{{value}} <div class="delete" @click="deleteName(value)" >×</div></div>
9 </div>
10 <button @click="callTheRoll()" > 点名 </button>
11 <button @click="ToCallTheRoll()" > 重新点名 </button>
12 <br>
13 <div>{{list}}</div>
14 </div>
15 </body>
<style>
*{
padding: 0px;
margin: 0px;
}
.name-box{
display: flex;
width: 1200px;
padding: 20px;
border-radius: 8px;
border: 1px solid #666;
flex-wrap: wrap;
margin: 0 auto;
}
.name{
width: 10%;
height: 30px;
margin: 10px 1.25%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
background-color: #aaa;
position: relative;
}
.active{
background-color: #5cc;
}
.delete{
background-color: #c53;
width: 16px;
height: 16px;
border-radius: 50%;
display: none;
position: absolute;
top: -4px;
right: -4px;
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
}
.name:hover>.delete{
display: flex;
}
</style>
<script>
let vm = new Vue({
el:'#App',
data:{
add:'',
name: '',
classList: ['张三','赵四','吴亦凡','罗志祥','李易峰','文章','光头强','熊大','熊二','鸣人','佐助','卡卡西','春野樱','井野','大和','鹿丸','雏田'],
list:[]
},
watch: {
},
mounted(){},
methods: {
adds(){
console.log(this.name, 11112222)
if(!this.name){
alert('请输入名称')
return
}
this.classList.push(this.name)
this.name = ''
},
callTheRoll(){
if(this.list.length == this.classList.length){
alert('点名完成')
this.ToCallTheRoll()
return
}
let arr = this.classList.filter((value)=> !this.list.includes(value))
this.list.push(arr[Math.trunc(Math.random()*arr.length)])
this.add = this.list[this.list.length-1]
setTimeout(()=>{
this.add = ''
},1000)
},
ToCallTheRoll(){
this.list = []
},
deleteName(name){
this.classList = this.classList.filter((value)=> !(name == value))
}
}
})
</script>
标签：点名,name,classList,list,value,add,添加,随机,display From： https://www.cnblogs.com/szx911/p/16745665.html