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

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

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


单项绑定 :数据变,视图变;视图变(浏览器控制台上更新html),数据不变;这样的都是单向绑定。


双向 :数据变,视图变;视图变(在输入框更新),数据变


v-mode指令,用于表单数据双向绑定,针对以下几种类型:


ext 文本


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>
相关文章
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
7天前
|
JavaScript
|
6天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
9天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1017 0
|
9天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
9天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
9天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
20 1
|
14天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
23 1
|
9天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
32 0