Vue--表单收集数据，表单控件如何实现双向绑定

最新推荐文章于 2024-02-07 16:18:12 发布

码码姑娘

最新推荐文章于 2024-02-07 16:18:12 发布

阅读量465

点赞数

分类专栏：小白的前端开发学习之路文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/qq_45204129/article/details/121519971

版权

小白的前端开发学习之路专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!-- 
        如果是<input type="text"> 文本框，那么收集的就是文本框的内容，直接绑定v-model即可
        如果是<input type="radio"> 单选框 手机的value值，必须要给标签的value值，这样才能收集到值
        如果是<input type="checkbox"> 复选框
            1，没有配置value值，收集的是checked，勾选的就是true，
            2，配置了value值
                （1）data中的对应的属性 非数组，收集的是checked，勾选的就是true，
                （2）data中的对应的属性写成数组的形式，收集的是对应的选择的value
        如果是<select>，v-model是收集的是option的value，
        如果是<textare>的话，收集的是输入的文字
     -->

<body>
    <div id="root">
        <form action="">
            <label for="id">账号:</label>
            <input type="text" name="" id="id" v-model="account">  <br><br>

            <label for="pas">密码:</label>
            <input type="password" name="" id="pas" v-model="password">  <br><br>

            性别：
            男 <input type="radio" name="sex"  value="男" v-model="sex"> 
            女 <input type="radio" name="sex" value="女" v-model="sex">  
            <br><br>
            爱好：
            抽烟<input type="checkbox" name="hobby" id=""  v-model="hobby"  value="抽烟" >
            喝酒<input type="checkbox" name="hobby" id="" v-model="hobby" value="喝酒">
            读书<input type="checkbox" name="hobby" id="" v-model="hobby" value="读书">
            <br><br>
            所属校区：<select name="school" id="school" v-model="school">
                <option value="xi'an">西安</option>
                <option value="Suzhou">苏州</option>
            </select>
            <br><br>
            其他信息：<textarea  cols="20" rows="5" v-model="other"></textarea>
            <br><br>
            <input type="checkbox" v-model="agree">
            阅读并接受<a href="">用户协议</a>

        </form>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            account:'',
            password:'',
            sex:'女',
            hobby:[],
            school:'Suzhou',
            other:'',
            agree: false
        }
    })
</script>

v-model的一些修饰符：

①、v-model.number

当用只用v-model.number=“”写时,就能做到输入数字,并且数字还是数字形式的但是文本框还能输入字母,但是data属性值任为数字不会进行添加字母

所以当type=“number” v-model.number=“” 一起使用时,就可以做到,既可以只输入数字并且属性值也为数字类型

②、v-model.lazy ：

一般来说当你输入一个值时,会立即发生对应属性的改变

加了lazy修饰符时,实现效果,只有当控件焦点失去的时候才会触发数据收集

③、v-model.trim 去掉前后空格

码码姑娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--表单收集数据，表单控件如何实现双向绑定

<!-- 如果是<input type="text"> 文本框，那么收集的就是文本框的内容，直接绑定v-model即可如果是<input type="radio"> 单选框手机的value值，必须要给标签的value值，这样才能收集到值如果是<input type="checkbox"> 复选框 1，没有配置value值，收集的是checked，勾选的就是true， .
复制链接

扫一扫

专栏目录