Vue 表单数据双向绑定 v-mode

Vue 表单数据双向绑定 v-mode

每一个Vue项目，每一个系统，肯定涉及到表单的双向数据绑定问题，这一部分是 vue 的重中之重，不是因为知识点复杂，而是因为只要参与 vue 项目的开发，那么就必不可少。

单向绑定

数据变，视图变；视图变（浏览器控制台上更新html），数据不变；这样的都是单向绑定。

双向绑

数据变，视图变；视图变（在输入框更新），数据变；

基础用法

v-model 指令，用于表单数据双向绑定，针对以下几种类型：

  • text 文本
  • testarea 多行文本
  • radio 单选框
  • checkbox 复选框
  • select 下拉框

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单数据双向绑定</title>
</head>

<body>
    <div id="app">
        <!-- 阻止事件默认行为，当前阻止的是submit -->
        <form action="#" @submit.prevent="submitForm">
            姓名（文本）：<input type="text" v-model="name">
            <br><br>
            性别（单选按钮）：
            <input type="radio" name="sex" value="1" v-model="sex">男
            <input type="radio" name="sex" value="0" v-model="sex">女
            <br><br>
            技能（多选框）：
            <input type="checkbox" name="skills" value="java" v-model="skills">java开发
            <input type="checkbox" name="skills" value="vue" v-model="skills">vue
            <input type="checkbox" name="skills" value="python" v-model="skills">python
            <br><br>
            城市（下拉框）：
            <select name="citys" v-model="city">
                <option v-for="c in citys" :value="c.code">{{c.name}}</option>
            </select>
            <br><br>
            说明（多行文本）: <br>
            <textarea id="" cols="30" rows="5" v-model="desc"></textarea>
            <br><br>
            <button type="submit">提交</button>
        </form>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                name: '',
                sex: '0',  // 默认值为0，它就会选中值为0的，也就是女生。
                skills: ['vue'], // 复选框被勾选之后会获得数组形式,默认选中vue。
                citys: [
                    { code: 'bj', name: '北京' },
                    { code: 'sd', name: '山东' },
                    { code: 'sh', name: '上海' },
                ],
                city: 'sd',
                desc: '',
            },
            methods: {
                submitForm: function () {
                    // 处理提交表单。
                    // 发送ajax请求异步处理。
                    alert(this.name + ',' + this.sex + ',' + this.skills + ',' + this.city + ',' + this.desc)
                }
            },
        })
    </script>

</body>

</html>

在这里插入图片描述

源码位置：https://gitee.com/wjw1014/vue_learning_course

posted @   叫我+V  阅读(1180)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2018-07-27 Arduino使用HC05蓝牙模块与手机连接
点击右上角即可分享
微信分享提示