Vue_v-model表单输入绑定

太过爱你忘了你带给我的痛 2022-12-10 08:41 127阅读 0赞

v-model:实现数据的双向绑定，一般在表单中使用。v-model在表单中，type为text和textarea元素使用value属性和input事件，checkbox使用checked属性，radio使用change事件，select将value作为prop并将change作为事件。  
v-model.lazy:本质上是失去焦点时触发  
v-model.number:转换为数字  
v-model.trim:去掉首尾空格  
示例：

<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <Script type="text/javascript">
            window.onload = function(){
               var app = new Vue({
                   el:"#app",
                    data () {
                        return {
                            username:"",
                            nicheng:"xiaoming",
                            password:"",
                            sex:"女",
                            likes:[],
                            allCities:[{id:1,name:'beijing'},{id:2,name:'shanghai'},{id:3,name:'guangzhou'}],
                            cityId:"",
                            desc:"",
                        }
                    },
                    methods: {
                        hanldSubmit(){
                            console.log(this.username,this.nicheng,this.password,this.sex,this.likes,this.cityId,this.desc);
                        }
                    }
               }); 
            };
    
        </Script>
    </head>
    <body>
        <div id="app">
            <form action="/XXX" @submit.prevent="hanldSubmit">
             用户名：  <input type="text" v-model="username"><br>
             昵称：<input type="text" v-model.lazy="nicheng">
             密码：<input type="password" v-model="password"><br>
             性别：<br>
             
             女：<input type="radio" id="female" value="女" v-model="sex">
             男：<input type="radio" id="male" value="男" v-model="sex"> 
             <br>
             爱好：
             <br>篮球：<input type="checkbox" id="basket" value="basket" v-model="likes">
             足球：<input type="checkbox" id="foot" value="foot" v-model="likes">
             排球：<input type="checkbox" id="valle" value="valle" v-model="likes"><br>
            城市：<select v-model="cityId">
                 <option value="未选择"></option><br>
                 <option :value="item.id" v-for="(item, index) in allCities" :key="index">{
       {item.name}}</option><br>
             </select><br>
             介绍：<textarea rows="10" v-model="desc"></textarea><br>
             注册<input type="submit">
            </form>
            
        </div>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue - 表单输入绑定详解

Vue.js 表单输入绑定详解在Web开发中，表单是用户与应用程序交互的重要方式之一。Vue.js 提供了强大的表单输入绑定机制，使得在处理用户输入时变得更加简洁和高效

不念不忘少年蓝@/ 2024年02月05日 20:38/ 0 赞/ 44 阅读

相关 Vue 表单输入绑定

基础用法你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神

小鱼儿/ 2023年10月11日 13:06/ 0 赞/ 48 阅读

相关 Vue_v-model表单输入绑定

v-model:实现数据的双向绑定，一般在表单中使用。v-model在表单中，type为text和textarea元素使用value属性和input事件，checkbox使用c

太过爱你忘了你带给我的痛/ 2022年12月10日 08:41/ 0 赞/ 128 阅读

相关 Vue.js（10）：表单输入绑定

一、基础用法你可以用 v-model 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。它会根

曾经终败给现在/ 2022年09月14日 13:24/ 0 赞/ 196 阅读

相关 Vue之表单输入绑定

Example 在HTML中，表单是很常见的。对于`Vue`来说，使用`v-bind`并不能解决表单域对象双向绑定的需求——所谓双向绑定，就是无论是通过`input`还是

约定不等于承诺〃/ 2022年05月15日 18:21/ 0 赞/ 253 阅读

相关 v-model表单输入绑定

1. 基础用法（1）v-model指令 `v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。它

朴灿烈づ我的快乐病毒、/ 2022年04月18日 01:10/ 0 赞/ 270 阅读

相关 Vue系列八：表单输入绑定

1. 使用v-model(双向数据绑定)自动收集数据 text/textarea checkbox radio select

古城微笑少年丶/ 2022年01月30日 06:17/ 0 赞/ 265 阅读

相关 vue之表单输入绑定

一、v-model指令　　　　用 `v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。它会根据控

﹏ヽ暗。殇╰゛Y/ 2021年11月02日 13:50/ 0 赞/ 418 阅读

相关 Vue表单输入绑定修饰符

Vue表单输入绑定修饰符 .lazy .number .trim .lazy 在默认情况下，`v-model` 在每次 `input` 事件

╰半夏微凉°/ 2021年10月20日 01:12/ 0 赞/ 374 阅读

相关 Vue表单输入绑定

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

痛定思痛。/ 2021年08月19日 22:15/ 0 赞/ 444 阅读