随机点名、、、添加学生 





    <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/vue@2.6.14"></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>




 






            

            
posted @ 
2022-09-30 17:35 
挖眼猪 
阅读(36) 
评论(0) 
 
收藏 
举报