VUE表单操作和基本修饰符

最新推荐文章于 2024-09-24 15:55:35 发布
最新推荐文章于 2024-09-24 15:55:35 发布
阅读量208 收藏
点赞数
文章标签： vue css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47683287/article/details/109325108
版权

VUE表单操作

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="app">
            <form action="">
                <div>
                    <!-- 单行文本框操作方法 -->
                    <span>姓名：</span>
                    <span><input type="text" v-model = 'uname'></span>
                </div>
                <div>
                    <!-- 单选框操作方法 -->
                    <span>性别:</span>
                    <span>
                        <input type="radio" id="boy" value="1" v-model = 'gender'>
                        <label for="boy">男</label>
                        <input type="radio" id="gril" value="2" v-model = 'gender'>
                        <label for="gril">女</label>
                    </span>
                </div>
                <div>
                    <!-- 多选框操作方法 -->
                    <span>爱好：</span>
                    <span>
                        <input type="checkbox" id="lanqiu" value="1" v-model = 'habby'>
                        <label id="lanqiu">篮球</label>
    
                        <input type="checkbox" id="足球" value="2" v-model = 'habby'>
                        <label id="zuqiu">足球</label>
    
                        <input type="checkbox" id="shuqiu" value="3" v-model = 'habby'>
                        <label id="输球">篮球</label>
                    </span>
                </div>
                <div>
                    <span>职业：</span>
                    <select v-model = 'occupation'>
                        <option value="0">请选择职业</option>
                        <option value="1">教师</option>
                        <option value="2">司机</option>
                        <option value="3">程序猿</option>
                        <option value="4">销售</option>
                        <option value="5">幼师</option>
                    </select>
                </div>
                <div>
                    <span>自我介绍：</span>
                    <textarea v-model = 'desc'></textarea>
                </div>
                <div>
                    <input type="submit" value="提交" v-on:click.prevent="handle">
                </div>
            </form>
        </div>


        
        <!-- 表单的修饰符
            number ：转数值
            lazy：失去焦点时触发
            trim：清除前后空格
            使用方法：<标签 v-model.表单修饰符 = ''> </标签>
        
        
        
        -->
        
            
        
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    uname:'nihao',     //单行文本
                    gender:1,          //默认选中(单选框)
                    habby:[],          //多选框(也可以在数组中加入值，设置默认状态)
                    occupation:0,      //下拉选项也可以是多选，需要在selection添加个mulpitle = "true",下面occpution值为[]
                    desc:'nihaoa'

                },
                methods:{
                    handle:function() {
                        // console.log(this.uname);
                        // console.log(this.gender);
                        // console.log(this.habby)
                        // console.log(this.occupation)
                        console.log(this.desc)
                    }
                    
                    
                }
            })
        </script>
    </body>
</html>
胡先生的博客
关注
129-Vue中表单修饰符
jolinoy的博客
07-20 326
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。在监听键盘事件时，我们经常需要检查详细的按键。（meta在win上代表⊞键，在mac上代表⌘键）希望在input的change之后再更新输入框的值。我们还有其他的修饰符，比如表单上常用的。这个功能，所以mac上无法实现）(捕获“删除”和“退格”键)（实测结果由于mac系统。...
vue表单操作和修饰符
qq_46036183的博客
11-28 162
vue表单 修饰符 1.表单 姓名 name eg:"张三" 性别 sex eg:"0" 说明：男-0 女-1 电话 tel eg:"15747474747" 密码 pass eg:"123" 爱好 hobby eg:["codding","playing"] 说明：唱歌-sing 跳舞-dancing 打游戏-playing 写代码-codding 专业 job eg:"web" 说明：java工程师-java web工程师-web php工程师-php 证书 cert eg:["erji
vue中表单修饰符
weixin_48727085的博客
09-13 143
<!DOCTYPE HTML> <html lang= 'en'> <head> <meta charset = 'UTF-8'/> </head> <body> <div id = 'box'> <!--.lazy使v-model变懒--> <input type = 'text' v-model.lazy = 'mytext'/> {{mytext}} &lt
Vue 表单修饰符
yshusencsdn的博客
10-18 634
Vue 表单修饰符 总结： （1）lazy 当表单失去焦点时触发事件 （2）number 当number类型的值使用v-model绑定后会变成 String类型，number可以将其转化成数字类型 （3）trim 自动去掉户输入的首尾空白字符 <!DOCTYPE html> <html lang="en"> <head> <meta charset...
vue表单修饰符
weixin_52629158的博客
05-20 81
在默认情况下，我们用 v-model指令，在每次 input 文本框中，用户输入值的同时，数据中心的 数据进行同步 在默认情况下，在每次 input 事件触发后 ==== 事件触发后，指的是 获取焦点事件 触发后。.lazy 将input事件切换成change事件 - .lazy 修饰符延迟了同步更新属性值的时机。.trim 自动过滤用户输入的首尾空白字符 - 注意：只能去掉首尾的 不能去除中间的空格！如果想自动将用户的输入值转为数值类型，可以给。
vue事件修饰符和按键修饰符用法总结
12-03
本文将深入探讨Vue中的事件修饰符和按键修饰符。 首先，让我们来看看事件修饰符。事件修饰符是以点`.`开头的指令后缀，用于在事件处理函数中添加额外的行为。以下是一些常见的事件修饰符： 1. `.prevent`：这个...
Vue 按键修饰符处理事件的方法
08-27
Vue 按键修饰符主要分为两大类：按键别名和系统修饰键。 按键别名是 Vue 为常用的按键提供的别名，例如 enter、tab、delete、esc、space、up、down、left、right 等。这些别名可以直接使用在键盘事件中，例如 `请...
vue的lazy修饰符和number修饰符 、表单结构
Mikeylllllll的博客
11-25 1551
vue的lazy修饰符和number修饰符 、表单结构
Vue.js 事件修饰符的使用教程
10-17
最后，文章强调了Vue.js处理事件的便利性，它通过内置的修饰符帮助开发者从繁琐的DOM事件细节中解放出来，使我们能够将更多的精力放在数据逻辑和应用逻辑的实现上。这正是Vue.js框架设计中追求简洁、高效的理念体现...
Vue：表单修饰符（.lazy/.number/.trim）
qq_45820271的博客
03-12 1192
本文介绍了VUE的三种表单修饰符.lazy，.number，.trim的作用和用法
vue笔记---表单修饰符
qq_34530330的博客
03-10 566
#lazy 在默认情况下，v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy, 从而转变为在change事件中同步。 在change而不是input事件中更新 #number 如果像自动将用户的输入值转为Number类型（如果原值的转换结果为NAN则返回原值） 可以添加一个修饰符number给v-model来处理输入值： 这通常很有用，因为在
vue中表单绑定修饰符
我不想说
04-09 325
lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步 <div id="app"> <input type="text" v-model="value">{{value}} </div...
vue常用的修饰符
weixin_43962020的博客
12-09 2459
使用sync需要注意：使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致，注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用，将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的。在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。解析，则会返回原来的值。
Vue修饰符的总结归纳（Vue2和Vue3通用）
有事儿私信。
10-01 2397
在Vue.js中，修饰符是一种简洁的语法糖，用于修改Vue指令的行为。这些修饰符可以让我们更简洁地处理一些常见场景，比如表单输入的延迟绑定、输入值的格式化等。了解和掌握Vue的修饰符，可以让我们在开发过程中更加高效和灵活。
[多浏览器兼容]IE浏览器HTML条件注释
ybdesire的专栏
11-11 2816
使用HTML条件注释检测IE版本，IE5到IE9都支持。
Vue中集中常见的布局方式
张雨的博客
09-24 384
【代码】Vue中集中常见的布局方式。
CSS05-复合选择器
最新发布
qq_31532983的博客
09-24 199
后代选择器、子类选择器、并集选择器、伪类选择器（链接伪类、focus伪类）
CSS04-Chrome调试工具
qq_31532983的博客
09-24 227
Chrome调试工具
面经 | css
YuuuPeeiiiii的博客
09-24 721
flex:1是felx:1 1 0的简写，是flex-grow:1;flex-basis:0的简写；掌握熟悉上面的一两种写下就行了。父元素是非static元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值