v-model的用法

已于 2022-06-08 15:10:53 修改
阅读量649 收藏
点赞数
分类专栏： vue 文章标签： vue.js elementui javascript
于 2022-05-26 10:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Q2159621453/article/details/124972984
版权

1、v-model的使用原理。

<body>
    <div id="root">
        <input type="text" :value="msg"  @input="changeMsg">
        <h2>{{msg}}</h2>
    </div>    

    <script>
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    msg:"张三"
                }
            },
            methods:{
                changeMsg(e){
                    this.msg = e.target.value
                }
            }
        })
    </script>
</body>

2.v-model与radio结合使用

<body>
    <div id="root">
        <label for="male">男</label>
        <input type="radio" name="sex" id="male" v-model="sex" value="男">

        <label for="female">女</label>
        <input type="radio" name="sex" id="female" v-model="sex" value="女">

        <h3>您的性别是：{{sex}}</h3>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    sex: "男"
                }
            }
        })
    </script>
</body>

3.v-model与checkbox结合使用

<body>
    <div id="root">
        <label for="isagree"><input type="checkbox" id="isagree" :checked="isagree"         
                                                          @click="btn">同意协议</label><br>
        <button :disabled="!isagree">下一步</button>
    </div>

    <script>
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    isagree:false
                }
            },
            methods:{
                btn(){
                    this.isagree = !this.isagree
                }
            }
        })
    </script>
</body>

<body>
    <div id="root">
        <h2>多选框</h2>
        <input type="checkbox" name="sports" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" name="sports" value="足球" v-model="hobbies">足球
        <input type="checkbox" name="sports" value="羽毛球" v-model="hobbies">羽毛球
        <input type="checkbox" name="sports" value="排球" v-model="hobbies">排球
        <h2>您的爱好是：{{hobbies}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    hobbies:[]
                }
            }
        })
    </script>
</body>

<body>
    <div id="root">
        <label :for="index" v-for="(item,index) in sports" >
            <input type="checkbox" name="sport" :id="index" :value="item" v-model="hobbies">{{item}}
        </label>
        <h2>您的爱好是：{{hobbies}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    hobbies:[],
                    sports:['篮球','足球','羽毛球','排球']
                }
            }
        })
    </script>
</body>

 

4.v-model与select结合使用

<body>
    <div id="root">
        <!-- 单选 -->
        <select name="fruit" v-model="fruit">
            <option :value="item" v-for="(item,index) in fruits">{{item}}</option>
        </select>
        <h2>你选择的水果是：{{fruit}}</h2>
        <!-- 多选 -->
        <select name="fruits" v-model="fruits2" multiple>
            <option :value="item" v-for="(item,index) in fruits">{{item}}</option>
        </select>
        <h2>你选择的水果是：{{fruits2}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    fruits:['苹果','香蕉','西瓜'],
                    fruit:"苹果",
                    fruits2:[]
                }
            }
        })
    </script>
</body>

 

5.v-model修饰符

lazy

<body>
    <div id="root">
        <input type="text" v-model.lazy="msg">
        <h2>{{msg}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    msg: '张三',
                    age: 18,
                    name: '李四'
                }
            }
        })
    </script>
</body>

不是实时修改，按下enter键后才会修改。

number

        <input type="text" v-model.number="age">
        <h2>{{age}}---{{typeof age}}</h2>

 

 必须是数字，不是数字不显示。

trim

        <input type="text" v-model.trim="name">
        <h2>姓名：{{name}}</h2>

 去除空格

〆﹏为你伏笔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三、v-model指令的详细用法、事件修饰符、按键修饰符
qq_63011146的博客
02-02 6648
① v-model指令的详细用法 1.v-model指令，绑定文本框的内容，实现双向数据绑定 <input type="text" v-model="name"> 2.v-model指令，绑定多行文本框的内容，实现双向数据绑定 注意：在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。 <textarea cols="80" rows="4" v-model="address"&gt
全网最详细的v-model讲解
热门推荐
zayyo的博客
11-29 15万+
v-model的基本使用 表单提交是开发中非常常见的功能，也是和用户交互的重要手段： 比如用户在登录、注册时需要提交账号密码； 比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； 它会根据控件类型自动选取正确的方法来更新元素； 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-09 7302
在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。
Hadoop-MapReduce学习
迷路剑客个人博客
01-24 1232
Hadoop-MapReduce学习 摘要 本文简要将就爱你过MapReduce，重点是Shuffle部分 0x01 MapReduce-Mapper侧 1.1 简介 以上是一张Hadoop官方创作的MR过程图示。我们以大数据届的HelloWorld-WordCount为例讲述下MR过程。 1.2 Split-分片 1.2.1 Split简述 Map阶段的输入通常是HDFS上文件。 在运行Ma...
Vue之v-model的使用
weixin_42504805的博客
06-09 2万+
v-model
vue.js指令v-model使用方法
10-20
主要为大家详细介绍了vue.js指令v-model的使用方法 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue v-model的用法解析
01-18
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jsx-v-model-一个Babel插件，将v-model引入JSX。-Vue.js开发
05-27
用法：npm i babel-plugin-jsx-v-model -D然后在插件示例.babelrc下将jsx-v-model添加到您的.babelrc文件：{“ presets”：[“ es2015”]，“ plugins”：[“ jsx-v-model“，” transform-vue-jsx“]}代码：Vue....
v-model的使用
我的博客
05-16 7176
v-model可以实现表单元素和数据的双向绑定 什么是双向绑定？ 例如<input type=“text” v-model=“message”> message的数据改变，input输入框中的数据会随之变化 input输入框中的数据变化了，message的数据也会改变 v-model其实是一个语法糖，它背后的本质是两个操作 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件 <input type=“text” :value=“message” @inpu
【Vue】v-model 的使用
Superman_H的博客
02-01 4769
# 双向绑定 v-model - `v-model:value="值"` 可简写为 `v-model="值"`，用于**双向绑定** \[表单元素] 的信息 - 双向绑定：表单元素的 `value` attribute 的值 ↔ data 中对应的值 - 本质上，v-model 是由 v-bind 配合 input 事件实现的 ① v-bind 绑定 value 属性、② 在 input 事件的回调函数中更新 value 的值 ## 文本 input [text] `
v-model实现原理（一根绳上的蚂蚱）
Zhang_wang_yun的博客
06-22 5685
v-model本质上是一颗语法糖，可以用 `v-model` 指令在表单 ``、` `及 ``元素上创建双向数据绑定
十、v-model的基本使用
Sean_0819的博客
04-25 3147
登录、注册检索、创建、更新表单 input、textarea以及select元素双向数据绑定控件类型但 v-model 本质上不过是语法糖监听用户的输入事件来更新数据input里面的value属性，是决定当前输入框里的默认值的。此时我想把meesage绑定成input里面的默认的值，我该怎么去操作呢？那此时我在页面输入框里输入新的值的时候，是不是我还得把输入的内容再传给message？那我有一个疑惑，我怎么才能把我输入的内容再绑定给message呢？
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 3892
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
v-model使用及原理
dayexiaofan的博客
05-22 2946
其他人的文章要么就写的vue2，要么就vue3，这里参照官网和其他博客整理一下。
Vue3: v-model
Everglow___的博客
04-18 1万+
Vue 有一些内置的修饰符，比如 .trim、.lazy 和 .number。在某些场景下，我们可以使用自定义修饰符。我们在组件上的 v-model中使用修饰符时，父组件会向子组件传递 一个props：，这个属性名也是固定的，这个属性是一个对象，我们可以在这个对象中访问到这个修饰符。这个props默认是一个空对象。比如下面的栗子中，modelModifiers的值是 {capitalize: true}，我们可以通过判断这个修饰符对应的属性值，对modelValue进行一些操作。})
required 和v-model用法
07-27
引用\[2\]中提到，v-model 允许一个自定义组件在使用时定制 prop 和 event。默认情况下，v-model 会将 value 用作 prop，input 用作 event。但是，有些输入类型可能需要使用不同的 prop 名称，例如单选框和复选框...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值