【Vue3】2-10 : 表单处理与双向数据绑定原理

这篇具有很好参考价值的文章主要介绍了【Vue3】2-10 : 表单处理与双向数据绑定原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本书目录:点击进入

一、表单处理

1.1、【双向绑定】实现方式一:v-model

>  代码 

>  效果 

1.2、【双向绑定】实现方式二::value属性 + input事件

>  代码 

>  效果 (同上)

二、实战

2.1 【v-model 示例】输入框 

>  代码 + 效果 (见1.1)

2.2 【v-model 示例】单选框 

>  代码 

>  效果

2.3 【v-model 示例】复选框 

>  代码 

>  效果

2.4 【v-model 示例】下拉菜单

>  代码 

>  效果


一、表单处理

vue3获取复选框的数据,架构师之路-java,前端,javascript,开发语言,表单处理,双向绑定

  • 收集表单数据,发送给后端,把后端的数据进行回显

  • 双向绑定:实质上是接口返回对象和表单组件的绑定

  • v-model 指令 实现响应式数据的处理。原理相当于 :value属性 + input事件

  • v-model除了可以处理输入框以外,也可以用在单选框、复选框、以及下拉菜单中。

1.1、【双向绑定】实现方式一:v-model

>  代码 

<body>
  <div id="app">
     <input type="text" v-model="message">
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          message: 'hello world'
        }
      }
    }).mount('#app');

    setTimeout(()=>{
      vm.message = 'hi vue'
    }, 5000)

  </script>
</body>

>  效果 

vue3获取复选框的数据,架构师之路-java,前端,javascript,开发语言,表单处理,双向绑定

1.2、【双向绑定】实现方式二::value属性 + input事件

>  代码 

<body>
  <div id="app">
    <!--<input type="text" v-model="message">-->
    <input type="text" :value="message" @input="message = $event.target.value">
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          message: 'hello world'
        }
      }
    }).mount('#app');

    setTimeout(()=>{
      vm.message = 'hi vue'
    }, 5000)

  </script>
</body>
</html>

>  效果 (同上)

二、实战

2.1 【v-model 示例】输入框 

>  代码 + 效果 (见1.1)

2.2 【v-model 示例】单选框 

>  代码 

  <div id="app">
    <input type="radio" v-model="gender" value="女">女<br>
    <input type="radio" v-model="gender" value="男">男<br>
    {{ gender }} 

  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          gender: '男'
        }
      }
    }).mount('#app');

  </script>

>  效果

vue3获取复选框的数据,架构师之路-java,前端,javascript,开发语言,表单处理,双向绑定

2.3 【v-model 示例】复选框 

>  代码 

  <div id="app">
    <input type="checkbox" v-model="fruits" value="苹果">苹果<br>
    <input type="checkbox" v-model="fruits" value="西瓜">西瓜<br>
    <input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜<br>
    {{ fruits }}

  </div>

  <script>
    let vm = Vue.createApp({
      data(){
        return {
          fruits: ['西瓜', '哈密瓜']
        }
      }
    }).mount('#app');
  </script>

>  效果

vue3获取复选框的数据,架构师之路-java,前端,javascript,开发语言,表单处理,双向绑定

2.4 【v-model 示例】下拉菜单

>  代码 

  <div id="app">
    <select v-model="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="杭州">杭州</option>
    </select>
    {{ city }}
  </div>

  <script>
    let vm = Vue.createApp({
      data(){
        return {
          city: '杭州'
        }
      }
    }).mount('#app');
  </script>

>  效果

vue3获取复选框的数据,架构师之路-java,前端,javascript,开发语言,表单处理,双向绑定文章来源地址https://www.toymoban.com/news/detail-807045.html

到了这里,关于【Vue3】2-10 : 表单处理与双向数据绑定原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue全家桶进阶之路31:Vue3 数据和方法的双向绑定ref、reactive、toRefs

    ref 在 Vue 3 中,你可以使用 setup 函数来定义组件的数据和方法。在 setup 函数中,你可以使用 ref 、 reactive 和 computed 等 Vue 3 的响应式 API 来定义数据,并返回一个包含你需要公开的数据和方法的对象。下面是一个例子: 在这个例子中,我们使用 ref 函数来定义了一个名为 mes

    2023年04月19日
    浏览(53)
  • vue3组件之间双向绑定

    Vue3中组件的双向绑定统一使用 v-model 进行处理,并且可以和多个数据进行绑定,例如 v-model:foo、v-model:bar。 v-model 等价于 :model-value=\\\"someValue\\\" 和 @update:model-value=\\\"someValue = $event\\\" v-model:foo 等价于 :foo=\\\"someValue\\\" 和 @update:foo=\\\"someValue = $event\\\" 父子组件之间双向绑定 子组件可以结合 i

    2024年02月11日
    浏览(30)
  • 表单的总数据为什么可以写成一个空对象,不用具体的写表单中绑定的值,vue3

      from为空对象  在v-model里写form.name,其实就是在form这个空对象里添加了一个键名为name的成员,你不用在script标签的form对象里面特意写name属性。

    2024年01月23日
    浏览(66)
  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(43)
  • 用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。

    Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。 Vue3对于表单的绑定提供了一种简单的方式: v-model 。对于使用者来说非常方便, v- model=\\\"name\\\" 就可以了。 但是当我们要自己做一

    2024年02月06日
    浏览(43)
  • vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】

    🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3+ant design vue+ts实战【ant-design-vue组件库引入】 🔥vue3【列表渲染】v-for 详细介绍(vue中的“循环”) 最近在项目开发中需要使用到 ant design vue 组件库的 单选框(Radio)组件 。所以本期文章会详细地教大家 如何使用Radio单选框 。

    2024年02月16日
    浏览(54)
  • ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统  gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio

    2024年03月23日
    浏览(48)
  • VUE数据双向绑定原理解析

    在Vue.js中,数据双向绑定是一项非常强大的功能。它使开发者能够轻松地将模板与数据进行动态关联,实现了页面和数据之间的实时同步更新。本文将深入探讨VUE中数据双向绑定的原理,并通过代码示例演示其工作机制。 VUE使用了JavaScript对象属性的 Object.defineProperty() 方法来

    2024年02月11日
    浏览(40)
  • Vue中双向数据绑定及底层原理

    Vue中的双向数据绑定是指数据的变化可以自动更新到视图,同时用户在视图上的操作也可以同步更新到数据。这种机制使得开发者无需手动操作DOM来实现数据与视图的同步。 Vue实现双向数据绑定的底层原理主要包括以下几个方面: 数据劫持:Vue通过使用 Object.defineProperty 方法

    2024年02月09日
    浏览(33)
  • Vue双向数据绑定原理(面试必问)

    1、前端面试题库 ( 面试必备)             推荐:★★★★★ 地址:前端面试题库   vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。 具体步骤

    2023年04月08日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包