草庐IT

Vue表单修饰符：v-model.lazy、v-model.number、v-model.trim

陌一一 2024-05-13 原文
  • 表单修饰符有：lazy、number、trim；
  • 修饰符加在v-model后面； 

lazy修饰符：

  • v-model的作用是双向绑定表单，能获取到input输入框的值，而且是实时获取的，就是当你输入框里的值发生改变就会获取到；
  • 有时候我们不想实时获取输入框的值，想一段时间获取一次，就可以用这个修饰符；
  • 这个修饰符的作用是，绑在v-model上在input标签上使用，当输入框失去焦点的时候才获取的value值；
  • 没加lazy之前：效果如下图：

  • 加上lazy之后：效果如下图：

 

  •  代码：
<body>
    <div id="box">
        <input type="text" v-model.lazy="mytext">
        {{mytext}}
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                mytext:""
            }
        })
    </script>
</body>
  • 上面两个效果图进行比较发现，当没加lazy之前，v-model是实时获取input的value值，只要value值发生变化了，但是加上lazy之后，它只会在当input标签失去焦点时，才会获取value值。

 number修饰符：

  • 我们通过v-model获取到input框里的value值都是字符串型的，如果我们想要获取用户输入的年龄，想要number型的数据，怎么办；
  • 当然可以通过先获取字符串型的，然后再通过字符串转数字型的Number方法转换成数字，但这种方法也是麻烦了；
  • 这时候number修饰符就是一个很简单很方便的方法；
  • 直接在v-model后面加上就能拿到Number型的数据了；
  • 没加之前效果：获取到的value值是字符串格式

  • 加了number之后效果：获取到的value值是数字格式

  • 代码：
<body>
    <div id="box">
        <input type="number" v-model.number="myage">
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                myage:''
            }
        })
    </script>
</body>

trim修饰符： 

  • 用户在注册用户名时候有可能不小心输入了首尾空格，然后数据库存储的也是有空格的，当用户再次输入的时候，不知道有这个空格的存在，所以就一直显示用户名错误，所以我们要有一个去除首尾空格的办法；
  • 那就是trim修饰符，作用是：去除获取的value值的首尾空格；
  • 没加之前效果：你输入空格，获取到了value值就是带有空格的

  • 加上之后，你输入空格，它会自动给你清除 

  • 代码：
<body>
    <div id="box">
        <input type="text" v-model.trim="myusername">
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                myusername:""
            }
        })
    </script>
</body>

 

v-modelmodelxffxff0cxff0vue.js前端javascript前端框架

有关Vue表单修饰符：v-model.lazy、v-model.number、v-model.trim的更多相关文章

  1. ruby-on-rails - rails : keeping DRY with ActiveRecord models that share similar complex attributes - 2

    这似乎应该有一个直截了当的答案，但在Google上花了很多时间，所以我找不到它。这可能是缺少正确关键字的情况。在我的RoR应用程序中，我有几个模型共享一种特定类型的字符串属性，该属性具有特殊验证和其他功能。我能想到的最接近的类似示例是表示URL的字符串。这会导致模型中出现大量重复(甚至单元测试中会出现更多重复)，但我不确定如何让它更DRY。我能想到几个可能的方向...按照“validates_url_format_of”插件，但这只会让验证干给这个特殊的字符串它自己的模型，但这看起来很像重溶液为这个特殊的字符串创建一个ruby​​类，但是我如何得到ActiveRecord关联这个类模型

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. ruby-on-rails - rails : check if the model was really saved in after_save - 2

    ActiveRecord用于在每次调用保存方法时调用after_save回调，即使模型没有更改并且没有生成插入/更新查询也是如此。这实际上是默认行为。在大多数情况下这没问题。但是一些after_save回调对模型是否实际保存的事情很敏感。有没有办法确定模型是否实际保存在after_save中？我正在运行以下测试代码:classStage 最佳答案 ActiveRecordusetocallafter_savecallbackeachtimesavemethodiscalledevenifthemodelwasnotchangedan

  6. ruby-on-rails - 工厂女孩/Rails : Generator to create a factory for existing model? - 2

    我在我的Rails项目中使用rspec_rails和factory_girl_railsgem。所有模型都已创建。是否有我可以运行的生成器来为现有模型创建工厂文件？例如:我已经有了一个Blog模型。RSpec允许我通过简单地运行以下命令在spec/models/blog_spec.rb生成一个模型规范文件:railsgeneraterspec:modelblog是否有我可以在命令行中运行的生成器，它会为这个现有模型生成工厂文件，位于:spec/factories/blogs.rb？我在factory_girl_rails中没有看到任何关于发电机的提及文档。

  7. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  8. ruby-on-rails - ruby rails : two references with different name to the same model - 2

    我的应用程序有一个名为User的模型(它包括电子邮件地址、用户名……)我想创建一个模型Message它应该有两个字段sender和recipient。两者都是对User模型的引用。我试过这个:railsgeneratemodelMessagesender:referencesrecipient:referencesRails生成了这个:classMessage但我不想要两种不同的模型。这两个字段都应引用User。我正在运行Ruby2.0.0和Rails4.0.2。非常感谢任何帮助。如果您需要有关我的问题的更多信息，请询问我。 最佳答案

  9. ruby-on-rails - 用于 Rails 的 HAML 表单 - 2

    我目前正在尝试将ERB布局转换为HAML。这是我不断收到的错误:index.html.haml:18:syntaxerror,unexpected')'));}\n#{_hamlout.format_...这是HAML页面:.row-fluid.span6%h2TodoList.span6%h2{:style=>"text-align:right;"}document.write(today)%hr.divider.row-fluid.span6%h2.small_headNewTask=render:partial=>'layouts/form_errors',:locals=>{:

  10. ruby-on-rails - 如何在 Rails 中为现有模型生成表单？ - 2

    为现有模型生成单个文件(_form.html.erb)的命令是什么？在Rails3中工作。谢谢。 最佳答案 这听起来可能很傻，但请听我说完……当我想开始清洁时，我自己也做过几次这样的事情。以下是一个脚本，它将读取您的模式并生成必要的生成命令来重现它:require'rubygems'require'active_support/core_ext'schema=File.read('db/schema.rb')schema.scan(/create_table"(\w+)",.*?\n(.*?)\nend/m).eachdo|name

随机推荐