Vue实现选课功能（自动）-CFANZ编程社区

Vue实现选课功能（自动）

选中课程，课程直接显示在已选课程框里，无需点击选课按钮。

要点：利用v-model实现与选中值的绑定。代码如下：

<body>
    <div id="app" >

        <div id="course" >
            <input  type="checkbox" name="1" v-model="checks" value="马克思主义哲学" >马克思主义哲学
            <input  type="checkbox" name="2" v-model="checks" value="计算机网络">计算机网络          
            <input  type="checkbox" name="3" v-model="checks" value="数据结构">数据结构
            <input  type="checkbox" name="4" v-model="checks" value="c语言工程">c语言工程
            <input  type="checkbox" name="5" v-model="checks" value="大数据时代">大数据时代
            <input  type="checkbox" name="6" v-model="checks" value="大学英语">大学英语
        </div>
        <div id="choose">
        选课
        </div>
        <div id="result"  >
            <!-- {{显示checks}} -->
            {{checks}}<br>
        </div>
    </div>

    <script>
        
        var VueApp = new Vue({
            el: '#app',
            data: {
              checks:[],//当选中复选框时，其value值会自动填充进数组；取消选中时，值也会从数组中自动移除。
            },
            methods: {
               

            }
        });
    </script>
</body>

效果如下：

0 条评论