v-model修饰符.lazy详解

news/2024/11/23 23:36:10/

官网相关内容:

在默认情况下,v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

     
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
个人实践理解:

1. 当v-model没有使用.lazy修饰符时:

代码:

<template>
  <div>
    <div>
      <input v-model="msg" @change="show">
      <span>{{msg}}</span>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      msg: 123
    }
  },
  methods: {
    show () {
      console.log(this.msg)
    }
  }
}
</script>

效果图:



结论:

v-model是双向绑定的,所以当改变input框中的值的时候,span中的内容随之改变而改变。

2.当v-model使用.lazy修饰符时:

代码:<input v-model.lazy="msg" @change="show">

效果图:




结论:当添加.lazy修饰符之后,改变input框中的内容并不会使得span中的内容发生变化,此时当输入框失去焦点后触发change事件.控制台中输出相应内容。


小结:加上.lazy后相当于 双向数据绑定不起作用了


http://www.ppmy.cn/news/883749.html

相关文章

WS_BORDER以及WS_EX_CLIENTEDGE的研究

每次研究一点东西&#xff0c;都没有记录&#xff0c;下次需要的时候又浪费时间重新去研究。本人就是个没有总结习惯的人&#xff0c;这样等于没用积累&#xff0c;实在不行。 这2天研究了一下WS_BORDER和WX_EX_CLIENTEDGE的不同&#xff0c;以及在动态创建&#xff0c;和窗口…

【solidity】函数修饰器(Function Modifiers)

修饰符可用于以声明方式更改函数的行为。例如&#xff0c;您可以使用修饰符在执行函数之前自动检查条件。 检查调用者权限 // SPDX-License-Identifier: GPL-3.0 pragma solidity >0.7.0 <0.9.0;contract Owned {address public owner;uint256 public account;construc…

ModifyStyle()调用不起作用

现象&#xff1a;在使用WTL做CListBox子类化时&#xff0c;使用 ModifyStyle(0, LBS_OWNERDRAWFIXED)不起作用; 原因&#xff1a;并不是所有的风格都可以动态利用ModifyStyle/ModifyStyleEx()函数增加和去除&#xff0c;有些风格比如 LBS_HASSTRINGS | LBS_OWNERDRAWFIXED| LB…

$(...).modal is not a function的解决办法

最近在练习ssm框架的时候遇到了一个小问题&#xff0c;无法识别bootstrap.min.js的modal方法&#xff0c;控制台报错$(...).modal is not a function。 于是测试测试了一下 发现可以正常弹框&#xff0c;然后又检查了id是不是写错了&#xff0c;也没写错。突然没了头绪。为什么…

user-modify

最近入职开始工作了&#xff0c;碰到一个很有意思的问题&#xff0c;后端传回来的文章内容<a>标签内的内容可以编辑。 很不理解&#xff0c;我从后端取到的数据这该怎么改呢。 问了同事&#xff08;导师&#xff09;&#xff0c;让我试试contenteditable属性&#xff0c;…

missing modality

THE MODALITY FOCUSING HYPOTHESIS: TOWARDS modal-general的知识是对于cross modality KD决定性的。 想要解决的问题是&#xff1a;crossmodal KD是否总是有效的&#xff1f; 文章通过实验证明即使多模态teacher能够取得更好的结果&#xff0c;但cross蒸馏过后的student mod…

This old-style function definition is not preceded by a prototype

文章目录 Introwarning 及解决 截屏知其然&#xff0c;却不知其所以然 Intro 在 Xcode 14 中随意写了几个C命令行程序&#xff0c;编译运行OK。 但是有以下两种报错&#xff1a; This old-style function definition is not preceded by a prototype This function declarati…

关于ModifyStyleEx无效的问题

在做MFC时&#xff0c;有时候我们需要显示选择一个项目&#xff0c;比如需要标记所选择的图片控件。我们可以用这个函数&#xff1a; BOOLModifyStyleEx ( DWORD dwRemove, DWORD dwAdd, UINT nFlags ) 或者 BOOLModifyStyle ( DWORD dwRemove, DWORD dwAdd, UINT nF…