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

最新推荐文章于 2023-07-19 11:03:57 发布

还不下马受降

最新推荐文章于 2023-07-19 11:03:57 发布

阅读量473

点赞数

分类专栏： Vue

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

版权

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=

最低0.47元/天解锁文章

还不下马受降

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-model：单选框、复选框、登陆检查

v-model实现的是数据的双向绑定，更多应用在表单中，绑定的数据实时变化。通过绑定用户输入获取数据。复选框：input类型为checkbox，给value赋不同的值，成为不同的选项，然后v-model绑定Vue实例中的数组，当选中的时候，值就会传递到数组中，因为双向绑定，在数组中添加选项的值，选项就会被选中，达到预选的效果。单选框：单选框input类型为radio，绑定一个Vue变量，选不同的但选项，绑定的值变化，达到单选效果，同样，在data中给变量赋值，达到预选效果。登陆检查：将输入的值绑定，.
复制链接

扫一扫

专栏目录