vue 表单元素 操作单选 与多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
           <!-- 性别: <br>
           <input type="radio" value="0" v-model='sex' checked > 男
           <input type="radio" value="1"  v-model='sex'> 女 
           <br> 
           <button @click='submit'>提交</button>      -->

            <input type="checkbox" value="ok" v-model="all" @click="handle">全选/全不选
            <br>
            <div @change="deletegaye">
                <input type="checkbox" value="song" v-model='hobby'>唱歌
                <input type="checkbox" value="dance" v-model='hobby'>跳舞 
                <input type="checkbox" value="read"  v-model='hobby'>读书 
                <input type="checkbox" value="javascript" v-model='hobby'>编程
            </div>
          

            <button @click="submit"> 提交 </button>  
              
    </div>
 
    <script src="./node_modules/vue/dist/vue.js"></script> 
    <script> 
 
        let vm = new Vue({
            el: "#app",
            data: {
               sex: 0,
               hobby:['javascript'],
               all:[]
            },
            methods:{
                submit(){ 
                    console.log(this.hobby)
                } 
                // submit(){
                //     console.log(this.sex)
                // }
                ,handle(){
                    if(!this.all.includes('ok')){
                        this.hobby=['song','dance','read','javascript']
                    }else{
                        this.hobby=[] 
                    }
                }
                ,deletegaye(){
                    this.all = this.hobby.length >=4 ? ['ok']: []
                   console.log(this.hobby.length)
                }
            }
        });
  
    </script>
 
</body>
</html>
posted @ 2021-02-26 15:21  13522679763-任国强  阅读(232)  评论(0)    收藏  举报