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. MySQL中count和sum使用

    count COUNT()函数里面的参数是列名的的时候,那么会计算有值项的次数.(NULL 不计入, 但是''值计入) COUNT(*)可以计算出行数,包括null COUNT(1)也可以计算出行数, ...

  2. k8s发布文件记录

    1.环境变量配置项 apiVersion: v1 # api版本 kind: ConfigMap # 配置项 metadata: name: common-key-svc # 名字 namespace ...

  3. EggJs快速入门

    Egg.js 简介 Egg.js 为企业级框架和应用而生,帮助开发团队和开发人员降低开发和维护成本. 专注于提供 Web 开发的核心功能和一套灵活可扩展的插件机制,不会做出技术选型,因为固定的技术选型 ...

  4. Unity BehaviorDesigner行为树基础总结

    BehaviorDesigner——行为树,用于控制和实现AI逻辑,类似于这样: 上面这个行为树实现了这样的逻辑: 当Player有Input时按照Input值来移动,无Input时查找最近的可攻击目 ...

  5. HDU 6556 （2018CCPC吉林 B题）

    ### HDU 6556 题目链接 ### 题目大意: 给你四个国家的时区,告诉你 A 国家的时间,让你输出这时候在 B 国家的时间,还需要输出对于 A 国家来说这是 昨天.今天 还是 明天. 分析前 ...

  6. ajax运行原理

    Ajax应用程序的加载过程与传统的Web应用程序类似.某个用户操作引发浏览器的一次HTTP请求.服务器接收请求并处理这个请求,生成合适的执行结果发送至客户端.客户端浏览器经过处理将数据(HTML+CS ...

  7. SpringBoot2使用Jetty容器（替换默认Tomcat）

    https://blog.csdn.net/hanchao5272/article/details/99649252   Jetty和tomcat的比较 Tomcat和Jetty都是一种Servlet ...

  8. Flask笔记：信号机制

    Flask中有内置的一些信号,也可以通过三方库blinker自定义信号,其实Flask内置的信号也是优先使用的blinker库,如果没有安装blinker才会使用自定义的信号机制.可以通过点击任意导入 ...

  9. 有关idea与mac的好用链接

    idea集成maven:https://www.cnblogs.com/daojiao/p/10270489.html idea集成tomcat:https://www.cnblogs.com/guo ...

  10. linux下grep命令的使用实例

    #多文件查询grep leo logs.log logs_back.log #查找即包含leo又包含li的行grep leo logs.log | grep li #查找匹配leo或者匹配li的行gr ...