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

代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js v-if语法使用 </title>

    <script src="vue.js"></script>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <template v-if="regType=='mail'">

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

    </template>

    <template v-if="regType=='phone'">

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

    </template>

    <input type="radio" value="mail" v-model="regType">邮箱注册

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

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        data:{

            regType:'mail'

        },

    });

</script>

</body>

</html>

vue 使用key唯一令牌解决表单值混乱的更多相关文章

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

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

  2. 15.VUE学习之-表单中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. mysql执行带外键的sql文件时出现mysql ERROR 1215 (HY000): Cannot add foreign key constraint的解决

    ERROR 1215 (HY000): Cannot add foreign key constraint 最近在建表时遇到了这个错误,然后找了下找到了解决办法,记录下: 本来是要建两张表: 1 2 ...

  4. jq获取表单值与赋值代码

    jq获取表单值与赋值代码 jq获取表单值与赋值代码 $("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var ...

  5. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  6. java web解决表单重复提交

    首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提交?2.什么情况下会出现表单重复提交?3.什么情况需要避免表单重复提交? 什么叫表单提交问题,说白了,就是同一份信息,重 ...

  7. vue中怎么动态生成form表单

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  8. 将Jquery序列化后的表单值转换成Json

    From: https://segmentfault.com/a/1190000000473625 小朋友有一个表单,他想以Json的方式获取到表单的内容.小朋友尝试了以下方式. 通过$(" ...

  9. javascript获取表单值的7种方式

    见代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. macOS 安装 Docker Desktop CE（转）

    现在基本上都使用docker进行部署项目,所以还是有必要学习下,关于docker的简介这里就不在描述,本文转载自https://yeasy.gitbooks.io/docker_practice/co ...

  2. POJ2001Shortest Prefixes（Trie树）

    传送门 题目大意:求最短唯一前缀 题解:Trie树 把单词一个个插入,每个字母节点v[]++;然后输出时输出到v[]为1的点, v[]=1说明只有这个单词经过. 代码 : #include<io ...

  3. iOS: 线程中那些常见的锁

    一.介绍 在多线程开发中,锁的使用基本必不可少,主要是为了解决资源共享时出现争夺而导致数据不一致的问题,也就是线程安全问题.锁的种类很多,在实际开发中,需要根据情况选择性的选取使用,毕竟使用锁也是消耗 ...

  4. IT兄弟连 Java语法教程 流程控制语句 分支结构语句1

    不论哪一种编程语言,都会提供两种基本的流程控制结构:分支结构和循环结构.其中分支结构用于实现根据条件来选择性地执行某段代码,循环结构则用于实现根据循环条件重复执行某段代码.Java同样提供了这两种流程 ...

  5. 【shell脚本】点名器===randomName.sh

    随机点名,从name.txt文件中读取名字 [root@VM_0_10_centos shellScript]# cat randowName.sh #!/bin/bash # 随机点名器 # 需提前 ...

  6. oracle视图和索引

    视图和索引 视图 视图的作用 控制数据访问.简化查询.避免重复访问相同的数据 视图的优点 限制用户只能通过视图检索数据,用户看不到底层基表 注意事项 视图可以理解为临时表,会随着真实表的数据变化而自动 ...

  7. oracle中decode函数用法及应用

    用法 1.decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 相当于if else 那种方式. 2.decode(字段或字段的运算,值1,值2,值3) 当字段或字段的运 ...

  8. 两种查看EFCore生成Sql语句的方法

    一.利用反射生成查询语句 该方法转载自:https://jhrs.com/2019/28488.html (略有修改) using Microsoft.EntityFrameworkCore.Quer ...

  9. 使用C#+Edge (Chromium)进行Web自动化测试

    今天看到了VisualStudio中现在已经自带了Web单元测试项目模板,便试了一下,发现还比较好用,它默认的是Selenium实现的,测试组在用Selenium+Python来写过自动化测试,原来它 ...

  10. EF框架访问access数据库入门(后附官方推荐“驱动”版本)

    vs2017调试通过. 1.添加需要的provider,有点添加驱动的意思.右击项目,NUGET “浏览”,“JetEntityFrameworkProvider”,安装,如图 完成后配置文件(控制台 ...