<!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. Centos7搭建redis，同一服务器启动两个端口的redis

    1.安装redis [1]下载安装包 #准备安装文件夹 mkdir /usr/local/soft/redis #进入文件夹 cd /usr/local/soft/redis #下载安装包 wget ...

  2. python 发布

    使用distutils.core.setup函数发布程序 将要发布的包放到mypub的目录下 在mypub目录下创建一个setup.py文件 setup.py文件的设置 from distutils. ...

  3. Oracle单列函数

    --字符函数--1.ASCII 返回与指定的字符对应的十进制数;select ascii('A') A,ascii('a') a,ascii('0') zero,ascii(' ') space fr ...

  4. 安卓usb数据接收

    之前在论坛里面求助了关于监听数据接收的问题,因为第一次做这方面,可能我提的问题太简单了,大神都不愿意回答我,(之前的帖子)晚上FQ浏览网站发现问题的解决办法, 原文是:最近老板让弄安卓和一块板子通信, ...

  5. JS实现2048

    2048这个游戏是通过对二维数组的操作来实现的,其算法核心如下: (以一行左移为例) c从0开始,遍历当前行中的元素,到<CN-1(CN是一个常量,表示的是游戏格子的列数)结束,每次+1 找到当 ...

  6. window mysql5.7 zip 安装

    第一步 ? 1 2 3 4 5 6 7 8 9 10 11 12 my-default.ini 添加配置: #绑定IPv4和3306端 bind-address = 127.0.0.1 port = ...

  7. mockJs语法糖用例

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

  8. 《Python高效开发实战》实战演练——开发Django站点1

    6.2 实战演练:开发Django站点 用Django开发网站需要遵循Django的一套开发流程.本节通过建立一个消息录入页面演示Django的开发流程及相关技术. 6.12.1  建立项目 在进行D ...

  9. uLua学习之读取外部Lua脚本（四）

    前言 上节说到了Lua脚本与unity3d中C#脚本的数据交互,但是我感觉上节中的数理方式不太好,因为我们是把Lua脚本以字符串形式粘贴到C#脚本中的,如果读取配置数据都这样做的话,那就太可怕了.想想 ...

  10. LeetCode 4Sum 4个数之和

    题意:这是继2sum和3sum之后的4sum,同理,也是找到所有4个元素序列,满足他们之和为target.以vector<vector<int>>来返回,也就是二维的,列长为4 ...