草庐IT

Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

zheng-yuzhu 2023-03-28 原文

 

文章目录

 

1、Vue中实现表单数据的收集

1.1 基础知识

表单中常用的标签：input(输入框)、radio(单选框)、checkbox(多选框)、select(下拉列表)、textarea(文本域)、button(按钮)

收集表单数据：

  • 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
  • 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
  • 若：<input type="checkbox"/>
    1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    2、配置input的value属性: (1)、v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）(2)、v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

  • lazy：失去焦点再收集数据
  • number：输入字符串转为有效的数字
  • trim：输入首尾空格过滤

1.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <form @submit.prevent="submit">
            账号：<input type="text" v-model.trim="UserInfo.account" /><br /><br />
            姓名：<input type="text" v-model="UserInfo.name"><br /><br />
            密码：<input type="password" v-mode="UserInfo.password"><br /><br />
            年龄: <input type="number" v-mode="UserInfo.age"><br /><br />
            性别：
            男<input type="radio" name='sex' v-model="UserInfo.sex" value="man">
            女 <input type="radio" name="sex" v-model="UserInfo.sex" value="female">

            爱好：
            学习:<input type="checkbox" v-model="UserInfo.hobby" value="study">
            打游戏:<input type="checkbox" v-model="UserInfo.hobby" value="playgame">
            干饭：<input type="checkbox" v-model="UserInfo.hobby" value="eat"> <br /><br />

            所在城市:
            <select v-model="UserInfo.city">
                <option value="">请选择城市</option>
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <option value="zhengzhou">郑州</option>
            </select>
            <br /><br />
            备注：
            <textarea v-model="UserInfo.other"></textarea><br /><br />
            <input type="checkbox" v-model="UserInfo.agree">阅读并接收<a href="http://www.baidu.com"></a>
            <button>提交</button>

        </form>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue",
                UserInfo: {
                    account: '',
                    name: '',
                    password: '',
                    age: 18,
                    sex: 'man',
                    hobby: [],
                    city: 'shanghai',
                    other: '',
                    agree: ''
                }
            },
            methods: {
                submit() {
                    console.log(JSON.stringify(this.UserInfo))

                }
            },
        })
    </script>

</body>

</html>

1.3 测试效果

1.4 额外插一嘴

  • 样式的设计可以引入外部css（方便管理）
  • 输入框的验证规则可以单独写一个js文件（方便管理）
  • 可以使用elementui、Bootstrap、layui(layui我觉得不好用)等框架进行页面的快速设计

习之Vuespanclasstoken

有关Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. 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关联这个类模型

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  9. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

随机推荐