V-model双向绑定数据

最新推荐文章于 2024-05-10 14:11:23 发布

渣渣圆

最新推荐文章于 2024-05-10 14:11:23 发布

阅读量847

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44154577/article/details/115606200

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一丶v-model

表单控件在实际开发中式非常常见的，特别是对于用户信息的提交，需要大量的表单
Vue中使用v-model指令来实现表单元素和数据的双向绑定

v-model其实是一个语法糖，他背后的本质上是包含两个操作

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<input type="text" v-model="message">
<!--等用于下面 -->
<input type="text" :value="message" @input="valueChange">
<input type="text" :value="message" @input="message = $event.target.value">
<h2>{{message}}</h2>

三种方式理解实现过程：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  双向绑定-->
  <input type="text" v-model="message">{{message}}
  <hr>
<!--  单向绑定实现双向绑定-->
<!--  value动态单项绑定message -->
<!--  input有一个事件，用于监听用户的输入,反向绑定message的值，实现双向绑定-->
  <input type="text" :value="message2" @input="valueChange">{{message2}}
  <hr>
<!--  不用函数调用，直接用$event-->
  <input type="text" :value="message3" @input="message3 = $event.target.value">{{message3}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
     message:"hello,world! 1",
	 message2:"hello,world! 2",
	 message3:"hello,world! 3"
    },
    methods:{
      valueChange(event) {
        //一旦在界面中产生一个事件，浏览器会自动生成一个event对象
        //enent对象中，有我们需要value,在event中的target中
        //在调用函数中，如果省略的实参，而定义函数时，有形参，会自动将event当做实参传入
        this.message = event.target.value
      }
    }
  })
</script>
</body>
</html>

运行结果:
在这里插入图片描述

v-model的修饰符

lazy
v-model.lazy可以让数据在失去焦点或者回车时才会更新，lazy就是懒惰的意思，可以理解为懒加载
number
在默认情况下，在输入框input无论我们输入的是字母还是数字，都会变当成字符串类型来进行处理，而v-model.number可以让输入对的内容自动转变成为数字类型
trim
如果输入的内容首尾有很多空格，v-model.trim就可以过滤掉左右两边的空格

渣渣圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
V-model双向绑定数据

一丶v-model表单控件在实际开发中式非常常见的，特别是对于用户信息的提交，需要大量的表单Vue中使用v-model指令来实现表单元素和数据的双向绑定v-model其实是一个语法糖，他背后的本质上是包含两个操作v-bind绑定一个value属性v-on指令给当前元素绑定input事件<input type="text" v-model="message"><input type="text" :value="message" @i
复制链接

扫一扫