Vue自学：v-model结合checkbox类型使用

程序员文章站 2022-03-01 17:41:14

...


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <title>Vue自学：v-model结合checkbox类型使用</title>
</head>
<body>
    <!-- 案例一：勾选已阅读才能进入下一步 -->
    <div id="app">

        <label for="agree">
            <input type="checkbox" name="agree" id="agree" value="同意" v-model="isCheckbox" />同意
        </label>
        <label for="disagree">
            <input type="checkbox" name="disagree" id="disagree" value="不同意"/>不同意
        </label>
        <button type="button" v-bind:disabled="!isCheckbox">提交注册</button>
    </div>
    <!-- 案例二：多选框点击存入数组中 -->
    <div id="app1">
        <label for="">
            <input type="checkbox" value="电影" id="movie" v-model="isCheckArray">电影
            <input type="checkbox" value="读书" id="read" v-model="isCheckArray">读书
            <input type="checkbox" value="运动" id="movement" v-model="isCheckArray">运动
            <input type="checkbox" value="上网" id="surf" v-model="isCheckArray">上网
        <h3>存入数组中...{{isCheckArray}}</h3>
        </label>
    </div>
</body>
<script type="text/javascript">
    const app = new Vue({
        el:'#app',
        data:{
            isCheckbox:false,
        },
        methods:{

        }
    })
    const app1 = new Vue({
        el:'#app1',
        data:{
            isCheckArray:[]
        },
        methods:{

        }
    })
</script>
</html>

上一篇： css怎样让table去掉边距

下一篇：其实Laravel自动生成的代码已经可以满足登录注册的需求了

Vue自学：v-model结合checkbox类型使用

vue指令之表单控件绑定v-model v-model与v-bind结合使用

vue指令：v-model绑定表单控件；v-model与v-bind结合使用

vue指令之表单控件绑定v-model v-model与v-bind结合使用

Vue自学：v-model结合select类型使用

Vue自学：v-model结合radio类型使用

Vue自学: v-model的使用（双向绑定input标签）

Vue自学：v-model结合checkbox类型使用

Vue自学：v-model的修饰符使用(lazy、number、trim)

Vue自学: v-model的使用（双向绑定input标签）

Vue自学：v-model的修饰符使用(lazy、number、trim)