Vue实现选课功能（自动）

最新推荐文章于 2023-12-01 09:07:06 发布

仰见山僧来

最新推荐文章于 2023-12-01 09:07:06 发布

阅读量431

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/m0_64125012/article/details/123586471

版权

本文介绍了如何使用Vue.js来实现选课功能，通过v-model绑定实现选中课程后立即显示在已选课程列表中，简化了用户操作，无需额外的选课按钮。

摘要由CSDN通过智能技术生成

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

要点：利用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>

效果如下：