<!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. 湖南省第十二届大学生计算机程序设计竞赛 problem A 2016

    如果 a * b % 2016 == 0 如果a = 1 ,且 a * b % 2016 == 0 考虑一下a = 2017的时候 2017 * b = (2016 + 1) * b % 2016 = ...

  2. Ubuntu16.04 下如何安装和卸载Google Chrome【亲测有效】

    一.安装 1.将下载源添加到系统源中. sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.li ...

  3. winform-Chrome-CefSharp库

    相关资源 教程地址:Winform下CefSharp的引用.配置.实例与报错排除 支持html5:http://www.html5tricks.com/demo/html5-css3-windmill ...

  4. mfc 列表控件

    经常使用的mfc控件:list control,记录下   首先将list control拖入到对话框中,然后命名ID,通过类向导,类型为control,控件变量名(m_showlist),  vie ...

  5. 显示单位px、dip以及sp的区别

    dip: Device Independent Pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA推荐使用这个,不依赖像素. p ...

  6. Google常用拓展插件

    1.web前端助手(FEhelper)提供一些实用的前端小工具,功能十分贴心 2.bookMarks Manager 一个书签管理工具 3.Clear Cache 清除浏览器的缓存,有很多供选择的条目 ...

  7. 使用FusionCharts创建可更新数据的JavaScript图表

    先创建一个简单的图表,然后改变它的数据(请参见下面的代码).图表最初据显示8月份的销售数据,当用户点击按钮时改为显示9月份的销售数据.每个月都有单独的XML文件,代码如下: <html> ...

  8. 报错：'byte' does not name a type

    这个错误是因为你在.cpp/.h中使用 byte 这个类型,把他修改成int就ok了

  9. Coursera_Learn how to learn笔记

    番茄工作法,隔20分钟休息一次. 构建组块步骤:1.集中注意力. 2.理解基本概念. 3.进行练习. 获得专业知识的第一步是创建概念组块,能够将分散的信息集合到一起. Recall(回顾)比反复阅读更 ...

  10. raspberrypi&linux

    Raspberrypi&linux 2018-01-23 19:54:01 Let's go!