Vue.js 3.0 学习笔记（八）表单输入绑定

最新推荐文章于 2023-06-08 11:48:16 发布
最新推荐文章于 2023-06-08 11:48:16 发布
阅读量613 收藏 6
点赞数
分类专栏： #vue3 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44648936/article/details/123433482
版权

一、实现双向数据绑定

双向绑定：就是无论是通过input还是通过Vue对象，都能修改绑定的数据对象的值
Vue通过v-model实现，其本质其实就是语法糖。
v-model会忽略所有表单元素的vlaue、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源

二、单行文本输入框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定单行文本输入框</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message" value="hello world"> //value值被忽略
    <p>{{message}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            message:"红罗袖里分明见"
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

三、多行文本输入框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定多行文本输入框</title>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <textarea v-model="message"></textarea>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            message:"轻衣软履步江沙"
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

四、复选框

单个复选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定单个复选框</title>
</head>
<body>
<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <!--for属性决定label与哪个表单元素绑定-->
    <label for="checkbox">{{ checked }}</label>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
           //默认值为false
            checked:false
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

多个复选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定多个复选框</title>
</head>
<body>
<div id="app">
    <p>选择需要采购的商品：</p>
    <input type="checkbox" id="name1" value="洗衣机" v-model="checkedNames">
    <label for="name1">洗衣机</label>
    <input type="checkbox" id="name2" value="冰箱" v-model="checkedNames">
    <label for="name2">冰箱</label>
    <input type="checkbox" id="name3" value="电视机" v-model="checkedNames">
    <label for="name3">电视机</label>
    <input type="checkbox" id="name4" value="空调" v-model="checkedNames">
    <label for="name4">空调</label>
    <p><span>选中的商品:{{ checkedNames }}</span></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
           checkedNames: []   //定义空数组
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

五、单选按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定单选按钮</title>
</head>
<body>
<div id="app">
    <h3>请选择本次采购的商品（单选题）</h3>
    <input type="radio" id="one" value="A" v-model="picked">
    <label for="one">A.洗衣机</label><br/>
    <input type="radio" id="two" value="B" v-model="picked">
    <label for="two">B.冰箱</label><br/>
    <input type="radio" id="three" value="C" v-model="picked">
    <label for="three">C.空调</label><br/>
    <input type="radio" id="four" value="D" v-model="picked">
    <label for="four">D. 电视机</label>
    <p><span>选择: {{ picked }}</span></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象，注意这里是对象，复选框是数组
        data(){
          return{
           picked: ''
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

六、选择框

1、单选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定单选框</title>
</head>
<body>
<div id="app">
    <h3>选择喜欢的课程</h3>
    <select v-model="selected">
        <option disabled value="">选择喜欢的课程</option>
        <option>Python开发班</option>
        <option>Java开发班</option>
        <option>前端开发班</option>
    </select>
    <span>选择的课程: {{ selected }}</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
           selected: ' '
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

2、多选课

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定多选框</title>
</head>
<body>
<div id="app">
    <h3>请选择您喜欢的课程</h3>
    <!--添加一个multiple属性即可，选择时按住Ctrl键-->
    <select v-model="selected" multiple style="height: 100px">
        <option disabled value="">可以选择的课程如下</option>
        <option>Java开发班</option>
        <option>Python开发班</option>
        <option>前端开发班</option>
        <option>PHP开发班</option>
    </select><br/>
    <span>选择的课程: {{ selected }}</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
           selected: []
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

3、使用v-for进行渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用v-for渲染的动态选项</title>
</head>
<body>
<div id="app">
    <h3>请选择您喜欢的课程</h3>
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
    </select>
    <span>选择的课程: {{ selected }}</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm = Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
           selected: [],
            options:[
                { text: '课程1', value: 'Java开发班' },
                { text: '课程2', value: 'Python开发班' },
                { text: '课程3', value: '前端开发班' }
            ]
           }
        }
     }).mount('#app');
</script>
</body>
</html>

七、值绑定

1、复选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态绑定复选框</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
    <span>{{toggle}}</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm = Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
           toggle:'false'
         }
        }
     }).mount('#app');
</script>
</body>
</html>

2、单选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态绑定单选框的值</title>
</head>
<body>
<div id="app">
    <input type="radio"  v-model="pick" v-bind:value="date">
    <span>{{ pick}}</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm = Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            date:'洗衣机 ',
            pick:'未选择'
         }

        }
     }).mount('#app');
</script>
</body>
</html>

3、选择框的选项

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态绑定选择框的选项</title>
</head>
<body>
<div id="app">
    <select v-model="selected" multiple>
        <option v-bind:value="{ number: 100 }">A</option>
        <option v-bind:value="{ number: 200 }">B</option>
        <option v-bind:value="{ number: 300  }">C</option>
        <option v-bind:value="{ number: 400 }">D</option>
    </select>
    <p><span>{{ selected }}</span></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm = Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            selected:[]
         }
        }
     }).mount('#app');
</script>
</body>
</html>

八、修饰符

1、lazy

v-model默认为同步数据，使用lazy会转变为在change事件中同步，也就是在失去焦点（也就是从选择框中移开）或者按下回车键时才更新

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>lazy修饰符</title>
</head>
<body>
<div id="app">
    <input v-model.lazy="message">
    <p>{{ message }}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            message:'',
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

2、number

自动将用户的输入值转为数值类型

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>number修饰符</title>
</head>
<body>
<div id="app"> 
        <p>.number修饰符</p>
        <input type="number" v-model.number="val">
        <p>数据类型是：{{ typeof(val) }}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            val:''
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

3、trim

自动过滤用户输入的首尾空格

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>trim修饰符</title>
</head>
<body>
<div id="app">
    <p>.trim修饰符</p>
    <input type="text" v-model.trim="val">
    <p>val的长度是：{{ val.length }}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            val:''
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

九、综合案例——设计用户注册页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
</head>
<body>
    <div  id="app">
    	<!--.prevent防止点击注册后默认刷新-->
        <form @submit.prevent="handleSubmit">
            <span>用户名称:</span>
            <input type="text" v-model="user.userName"><br>
             <span>用户密码:</span>
            <input type="password" v-model="user.pwd"><br>
            <span>性别:</span>
            <input type="radio" id="female" value="female" v-model="user.gender">
            <label for="female">女</label>
            <input type="radio" id="male" value="male" v-model="user.gender">
            <label for="male">男</label><br>
             <span>喜欢的技术：</span>
            <input type="checkbox" id="basketball" value="basketball" v-model="user.hobbys">
            <label for="basketball">Java开发</label>
            <input type="checkbox" id="football" value="football" v-model="user.hobbys">
            <label for="football">Python开发</label>
            <input type="checkbox" id="pingpang" value="pingpang" v-model="user.hobbys">
            <label for="pingpang">PHP开发</label><br>
             <span>就业城市：</span>
            <select v-model="user.selCityId">
                <option value="">未选择</option>
                <option v-for="city in citys" :value="city.id">{{city.name}}</option>
            </select><br>
              <span>介绍:</span><br>
            <textarea rows="5" cols="30" v-model="user.desc"></textarea><br>
             <input type="submit" value="注册">
        </form>
    </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
                user:{
                    userName:'',
                    pwd:'',
                    gender:'female',
                    hobbys:[],
                    selCityId:'',
                    desc:''
                },
                citys:[{id:1,name:"北京"},{id:2,name:"上海"},{id:3,name:"广州"}],
           }
        },
        methods:{
            handleSubmit(event){
                 console.log(JSON.stringify(this.user));
            }
       }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

在这里插入图片描述

奥妙无穹
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目移动端实现ip输入框问题
10-17
主要介绍了vue项目移动端实现ip输入框问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue.js表单输入绑定
Ccc1929969359的博客
07-03 306
1.可以用v-model指令在表单&lt;input&gt;及&lt;textarea&gt;元素上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源，应该通过JavaScript在组件的data选项中声明初始值。2.单个复选框，绑定到布尔值；多个复选框，绑定到同一个数组；单选按钮，绑定到单一属性对象（...
Vue-表单输入绑定
最新发布
CSDNLKK的博客
06-08 96
元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项（表达式的初始值未能匹配任何选项，元素上创建双向数据绑定。
vue3表单输入绑定
pscool的博客
04-29 2671
注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。vue3可以帮助我们将vue定义的变量绑定到html表单元素上，并且监听到html表单元素修改值时，会将对应的vue定义的变量修改。v-model 还可以用于各种不同类型的输入。注意：要加上下面的样式，才有换行效果哦。多个复选框绑定的是同一个数组或集合的值。单个的复选框，绑定的是布尔类型值。
Vue学习笔记之表单输入控件绑定
12-11
本篇笔记将详细讲解Vue中的表单输入控件绑定。 1. **基础用法** - 单行文本输入：`<input v-model="msg" placeholder="edit me">` 这个例子中，`v-model`指令将`msg`变量与输入框的值关联，任何在输入框中的更改...
前端主流框架 vue.js笔记
06-28
Vue.js是目前前端开发领域非常流行的JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Vue.js的设计理念是让开发更加简洁，通过声明式的数据绑定和组件化开发，使得构建用户界面的工作变得更加简单。...
Vue.JS项目源码学习笔记PDF版＋源码地址.zip
08-05
在这个“Vue.JS项目源码学习笔记PDF版＋源码地址.zip”压缩包中，包含了两个PDF版本的学习笔记和一个名为"project.zip"的项目源码，旨在帮助学习者深入理解Vue.js的实践应用。 首先，PDF文档"book（随堂电子书）....
Vue.js入门课程学习笔记
06-15
Vue.js入门课程学习笔记 Vue.js，作为一款流行的JavaScript MVVM（Model-View-ViewModel）库，被广泛用于构建用户界面。它以其轻量级、高效且易学的特点深受开发者喜爱。Vue.js的核心理念是数据驱动和组件化，这...
Vue教程0208-表单输入绑定
watchping的博客
02-11 301
表单输入绑定
【前端】vue.js实现输入框绑定
weixin_30448685的博客
08-21 292
vue.js实现输入框绑定 实现效果如下： 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="w...
Vue 3.0学习笔记之 表单输入绑定
wm201316的博客
02-04 677
attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。attribute 的初始值而总是将当前活动实例的数据作为数据来源。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。时，HTML 输入元素的值也总会返回字符串。如果你还不熟悉 Vue 的组件，可以暂且跳过这里。
vue3中的写法以及，一些语法糖
ONLYSRY的博客
01-09 1498
定义组件使用defineProps语法糖，在 中可直接使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 中是直接可用的，无需引入。因为vue3中没有了data(){ },那么就没办法劫持数据做到响应式数据，所以使用ref。定义数据需要在数据前面加ref，ref在vue3中是将数据转换成响应式数据结构的一种,在js中使用ref的值必须通过value获取。
Vue 实现 html 表格 (grid) 单元格编辑功能 2
yxp 的博客
12-23 1788
第一版表格编辑实现是刚学VUE时硬凑出来 经过网上的不断学习，代码精简功能增强，没有下载积分的朋友欢迎复制转载。 主要改进功能： 1. 单元格不需要点击两次才能输入 2. 单元格编辑时边框不需要重新绘制 3. 取消 vue 的 key 值更新刷新表格
Vue 3.0 表单输入绑定 【Vue3 从零开始】
2201_75866484的博客
02-23 661
attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。attribute 的初始值而总是将当前活动实例的数据作为数据来源。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。时，HTML 输入元素的值也总会返回字符串。如果你还不熟悉 Vue 的组件，可以暂且跳过这里。如果想自动将用户的输入值转为数值类型，可以给。
Vue.js实例学习：表单输入绑定
若水弹丸之地
03-12 664
一、基础用法 用 v-model 指令在表单 &lt; input&gt; 及 &lt; textarea&gt; 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 1、 文本 这里v-model指令与数据message相绑定 并 实时...
elementui+vue.js table动态添加列且添加动态的绑定值
qq_41991955的博客
04-18 2117
html部分： <el-table-column v-for="(item,index) in table3.tableTitle" :lable="item.label" :key="index" :prop="item.prop" align="center"> <template slot-scope="{row, index}"> <el-input size="small" type="number" v-model="row[item.prop].
vue3+js 实现按钮防抖，避免请求重复提交
csdnyp的博客
07-01 2690
vue3+js 实现按钮防抖，避免请求重复提交
Vue3属性绑定方式分析
老司机的后备箱
10-29 1477
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue.js框架深度探索：从基础到高级特性
Vue.js学习笔记 Vue.js是一个流行的前端轻量级框架，以其易用性、灵活性和高效性著称。它使得开发者能够将复杂的页面功能模块化，从而简化开发流程。本笔记将深入探讨Vue.js的一些核心概念和技术。 1. Vue.js属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值