<!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. jQuery 方法 属性

    Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.j ...

  2. centos6安装lnmp

    CentOS 6 默认仓库不包含nginx,我们可以手动添加nginx的仓库. 访问nginx官网获取repo文件 我们需要先访问nginx的官方网站,获取官方的仓库地址.点击这里访问nginx官方文 ...

  3. Diary

    2019.1.16 233333333 2018.12.5 猜猜我写了什么? 2018.12.3 maya真是越来粤菜了.. 突然发现cf其实有中文 2018.12.1 说好的今天出成绩呢?.. 咕咕 ...

  4. javascript设计模式之中介者模式

    /* * 小游戏演示中介者模式 * Home 按键 1 * Guest 按键 0 * 半分钟内看谁按下的次数多 * * 参与的对象: * 玩家 * 计分板 * 中介者 * * 中介者模式使对象之间松耦 ...

  5. 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统：6.技术简介之Protobuf

    欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 protocolbuffer(以下简称Protobuf)是google 的一种数据交换的格式,它独立于语言,独立于平 ...

  6. 1)实际时间(real time): 从command命令行开始执行到运行终止的消逝时间； 2)用户CPU时间(user CPU time): 命令执行完成花费的用户CPU时间，即命令在用户态中执行时间总和； 3)系统CPU时间(system CPU time): 命令执行完成花费的系统CPU时

    1)实际时间(real time): 从command命令行开始执行到运行终止的消逝时间: 2)用户CPU时间(user CPU time): 命令执行完成花费的用户CPU时间,即命令在用户态中执行时 ...

  7. use scanner/smb/smb_version

    use scanner/smb/smb_version msf auxiliary(smb_version) > set RHOSTS 172.16.21.170RHOSTS => 172 ...

  8. Redis 优缺点

    REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C语言编写.遵守B ...

  9. 美国L1签证面谈的时候一般VO会问到什么问题？

    L签证:L签证签发给被其中国公司调派到美国分公司或合资公司工作的人员.申请人必须将在美国担任经理级职务或具有专业知识,且在申请签证前的三年中至少为同一雇主或公司连续工作至少一年.签证签发费将因签证的入 ...

  10. GetIPAddress——获得本地IP地址信息

    1.gethostname()需要初始化套接字库 加载#pragma comment(lib,"ws2_32.lib"),和WSAStartup(MAKEWORD(2,2),&am ...