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. vue-cil3 运行报错

    warnings potentially fixable with the `--fix` option. 将一下部分:"lint": "vue-cli-service ...

  2. asp.net的原理

    Asp.net的作业流是指什么?很多人都不是很了解,也不知道是用来干什么的有怎样运用,其实能够从简略的基础了解. 作业流(Workflow),便是“事务进程的部分或全体在核算机使用环境下的主动化”(i ...

  3. 【51nod1678】lyk与gcd（莫比乌斯反演+枚举因数）

    点此看题面 大致题意: 一个长度为\(n\)的数组,实现两种操作:单点修改,给定\(i\)求\(\sum_{j=1}^na_j[gcd(i,j)=1]\). 莫比乌斯反演 考虑推一推询问操作的式子: ...

  4. LOJ6033「雅礼集训 2017 Day2」棋盘游戏 （博弈论，二分图，匈牙利算法）

    什么神仙思路啊-- 看到棋盘就去想二分图.(smg啊)(其实是校内模拟赛有基本一样的题,只不过直接给了个二分图) 看到二分图就去想最大匹配.(我怎么想偶环的性质去了) (以下内容摘自这里) 这个二分图 ...

  5. Codeforces Round 596 题解

    万幸的是终于碰上了一场上分好场. 不幸的是一开始差点不会 A. 万幸的是想了个不那么稳的结论过了 pretest. 不幸的是罚时很高,而且慌得一比. 万幸的是然后半个小时内把 B 和 C 码了. 不幸 ...

  6. 深入理解typescript的Functions

    Functions Introduction # Functions are the fundamental building block of any application in JavaScri ...

  7. Redis高可用集群-哨兵模式（Redis-Sentinel）

     前言 Redis哨兵模式,用现在流行的话可以说就是一个“哨兵机器人”,给“哨兵机器人”进行相应的配置之后,这个"机器人"可以7*24小时工作,它能能够自动帮助你做一些事情,如监控 ...

  8. 在新的电脑上的Git本地库 与远程库关联前的一些设置

    由于你的本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要一点设置: 第1步:创建SSH Key.在用户主目录下(user/...),看看有没有.ssh目录,如果有,再看看这个目 ...

  9. WEB-INF文件夹作用

    WEB-INF是Java的WEB应用的安全目录,客户端无法访问,只能通过服务端访问,从而实现了代码的安全.在WEB-INF中主要是系统运行的配置信息和环境 主要有classes.config.lib文 ...

  10. MySQL（11）---约束

    MySQL(11)---约束 含义: 一种限制,用于限制表中的数据,为了保证表中的数据的准确和可靠性. 先把Mysql几种约束列出来: 主键约束 外键约束 唯一性约束 非空约束 默认值约束 自增约束 ...