<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="vue">

        <div v-if="regType=='email'">

          <!--选择不同的单选,会把当前value的值赋值给下面data库里regType,从而影响上面的if判断的结果,达到切换显示手机或者邮箱输入框的效果-->

          邮箱:<input name="username" key="email" type="text">

        </div>

        <div v-else>

          手机:<input name="username" key="phone" type="text">

        </div>

        <br>

        <!--选择不同的单选,会影响到下面data库里regType里的值-->

        <input v-model="regType" name="email" value="email" type="radio">邮箱

        <input v-model="regType" name="phone" value="phone" type="radio">手机

    </div>

</body>

<script type="text/javascript">

    var app = new Vue({

        el: "#vue",

        data:{

            regType:'email',

        }

    });

</script>

</html>

效果:

15.VUE学习之-表单中使用key唯一令牌解决表单值混乱问题的更多相关文章

  1. 015——VUE中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue 使用key唯一令牌解决表单值混乱

    vue在渲染元素时,出于效率考虑,会尽可能地复用已有元素的而非重新渲染,如果你不希望这样可以使用Vue中提供的key属性,它可以让你决定是否要复用元素,key值必须是唯一的 代码: <!doct ...

  3. jquery获取form表单中的内容，并将表单内容更新到datagrid的一行

    //执行不刷新页面更新所修改的行 var arr = $('#patient_form').serializeArray();//将表单中的数据格式化成数组 var m = new Array(); ...

  4. ElementUI表单验证攻略：解决表单项启用和禁用验证的切换，以及动态表单验证的综合性问题

    试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...

  5. vue学习笔记一：用Key管理可复用元素

    vue为了高效的渲染元素,会尽可能的复用组件,而不是从头渲染,如下案例 <template> <div id="app"> <template v-i ...

  6. 前端表单中有按钮button自动提交表单

    问题描述 在设计表单时,表单内有一个按钮<button>,该按钮是用来获取其他数据或执行其他操作的.并不是让他提交表单. 解决方案 1) 设置 form 的 onsubmit='retur ...

  7. YII2表单中上传单个文件

    有些时候我们提交的表单中含有文件.怎么样让表单里的数据和文件一起提交. 我的数据表tb_user内容如下: CREATE TABLE `tb_user` ( `id` int(11) unsigned ...

  8. juery与表单中name="nodeName"引起的冲突

    引入jquery时,表单中如果有name="nodeName"的表单项,会有一些奇怪的冲突. 表单HTML代码如下: <form id="formAddEquipN ...

  9. laravel 字段映射问题，表单中提交字段与数据表中字段不一致

    在遇到提交表单时,表单中的name属性与数据表中的字段不一致,报错, 解决方法: 参考1:提交表单的时候,表单的name属性和数据表字段名称是一样的,这样有什么不妥么? 你数据库的信息给前端透露得越多 ...

随机推荐

  1. python3+Appium自动化08-数据配置yaml

    yaml简介 yaml是一种简洁的非标记语言.yaml以数据为中心,使用空白,缩进,分行组织数据,从而使得表示更加简洁易读 由于实现简单,解析成本低,yaml特别适合在脚本语言中使用.现有的语言实现: ...

  2. Java匹马行天下之JavaWeb核心技术——JSP

    JSP动态网页技术 一.JavaWeb简介 一.什么是JavaWeb? JavaWeb是用Java技术来解决相关web互联网领域的技术总称. 需要在特定的web服务器上运行,分为web服务器和web客 ...

  3. 工作经验（C++篇）

    这篇总结是我正式参加工作后,和同事交流学习得出来的,希望对其他人有帮助,也是自己的脚印 C++编程中,常会使用到类,组长给我们的经验是,一个类写在一个文件中,不要多各类写在一个文件 为了跨平台性,一个 ...

  4. IoC和AOP使用扩展。。。

    实现依赖的多种方式. 1.理解构造注入. 2.掌握使用p命名空间实现属性注入. 3.理解不同的数据类型的注入方式. 4.如何通过构造注入为业务类注入所依赖的数据访问层对象,实现保存用户数据功能. 5. ...

  5. Intellij IDEA 最头大的问题，如何自定义注释模板？

    想栈长我当初从 Eclipse 转用 IDEA 真是纠结,放弃然后尝试了N次,不过现在已经算是转型成功了,可以完全脱离 Eclipse 撸码了,虽然说我现在真的撸得非常少了.. 说到 IDEA 的痛点 ...

  6. Browser Screen

    Screen对象 Screen对象包含有关客户端显示屏幕的信息. 注释:没有应用于screen对象的公开标准,不过所有浏览器都支持该对象. Screen对象属性 availHeight 返回显示屏幕的 ...

  7. 绿盟堡垒机云服务（vSAS-H）

    绿盟堡垒机云服务(vSAS-H) 平台: linux 类型: 虚拟机镜像 软件包: basic software devops nsfocus security 堡垒机 服务优惠价: 按服务商许可协议 ...

  8. NEO

    平台: Windows 类型: 虚拟机镜像 软件包: .net core neo application server basic software blockchain neo open sourc ...

  9. crontab配置shell实现后台进程不间断运行

    检测get_report_no.php进程是否一直在运行 #!/bin/bash PROC=`ps -ef |grep get_report_no.php|grep -v grep|wc -l` if ...

  10. Java MD5加密算法工具类

    MD5.java package util; import java.security.MessageDigest; import java.security.NoSuchAlgorithmExcep ...