<!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. 了解【Docker】从这里开始

    一.环境配置的难题 软件开发最大的难题之一就是环境配置的问题.现在用户环境纷乱复杂,并且由于开源社区的进一步推广和许多开源项目不停地迭代更新,项目可能会有越来越多的依赖以及越来越难管理的依赖版本,如何 ...

  2. 《疯狂动物城》主题曲《TryEverything》中文翻译

    <疯狂动物城>主题曲<TryEverything>夏奇拉激情献唱,很多事情是需要是试试,不试试就不知道可以成功. Oh oh oh oh oooh 哦哦哦哦哦 Oh oh oh ...

  3. Rematch Redux的替代品

    前言:Rematch和vuex很像. 文档:https://github.com/yurizhang/rematch 简介: 先看看rematch的官方介绍: Rematch是没有boilerplat ...

  4. jquery初始

    今天我们来学习Jquery的一些基本知识,jquery相对来说还是比较重要的,所以还是要好好学习的. 首先要了解什么是jQuery? l类似于python里面的模块,可以看成是一种库或者插件. 在学习 ...

  5. C#中 String和string的区别

    string 是 System.String的别名,所以相当于声明了 using string = System.String 再者,string是C#的关键字,String是System下的类名.

  6. Maven建立spring-web项目

    参考博客网址: https://blog.csdn.net/caoxuekun/article/details/77336444 1.eclipse集成maven 2.maven创建web项目 3.搭 ...

  7. UGUI的事件系统分析

    UGUI的源码还是非常清晰的,打开源码可以发现, 从UGUI的源码可知:在EventSystem中调用每一帧函数来实现: private void TickModules() { for (var i ...

  8. sql & sqlalchemy join多个表

    # 连接两个数据表的用法: FROM Member INNER JOIN MemberSort ON Member.MemberSort=MemberSort.MemberSort # 语法格式可以概 ...

  9. WebAPI项目添加定时服务

    开发平台: VS2019 背景: 在开发小程序的API服务的时候,由于access_token的有效期为7200秒,也就是2小时,这就需要后端定时的去更新这个access_token,便于调用小程序的 ...

  10. 利用临时表实现CTE递归查询

    一.CTE递归查询简介 --CTE递归查询终止条件在TSQL脚本中,也能实现递归查询,SQL Server提供CTE(Common Table Expression),只需要编写少量的代码,就能实现递 ...