v-model：单选框、复选框、登陆检查

最新推荐文章于 2024-09-05 11:22:00 发布

还不下马受降

最新推荐文章于 2024-09-05 11:22:00 发布

阅读量501

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43865846/article/details/116353580

版权

本文介绍了v-model如何在单选框和复选框中实现数据双向绑定，以及如何利用v-model进行登录验证。在复选框中，v-model绑定数组，选中项的值会被添加到数组；在单选框中，v-model绑定变量，选中项改变该变量值。同时，展示了如何通过v-model和函数检查用户名和密码的有效性。

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

v-model实现的是数据的双向绑定，更多应用在表单中，绑定的数据实时变化。通过绑定用户输入获取数据。
复选框：input类型为checkbox，给value赋不同的值，成为不同的选项，然后v-model绑定Vue实例中的数组，当选中的时候，值就会传递到数组中，因为双向绑定，在数组中添加选项的值，选项就会被选中，达到预选的效果。
单选框：单选框input类型为radio，绑定一个Vue变量，选不同的但选项，绑定的值变化，达到单选效果，同样，在data中给变量赋值，达到预选效果。
登陆检查：将输入的值绑定，@click触发函数checkinput()，对数据进行检查，如果姓名为空，提示输入姓名，如果密码长度小于8，提示密码要大于八位数。event.preventDefalt()，阻止页面跳转。

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    
</head>
<body>
    <div  id="app">

        <!-- 复选框 -->
        <input id="one" type=