<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>使用key唯一令牌解决表单值混乱问题</title>

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

	</head>

	<body>

		<div id="lantian">

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

				邮箱：<input type="text" key="mail-register" />

			</template>

			<template v-else>

				手机：<input  type="text" key="phone-register" />

			</template>

			<br />

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

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

		</div>

		<script>

			var app=new Vue({

			el:'#lantian',

			data:{

				regType:'mail'

			}

		});

		</script>

	</body>

</html>

　　

015——VUE中使用key唯一令牌解决表单值混乱问题的更多相关文章

  1. vue 使用key唯一令牌解决表单值混乱

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

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

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

  3. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  4. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  5. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  6. Vue中的key到底有什么用？

    key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...

  7. vue中常见的问题以及解决方法

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...

  8. vue中getters不更新数据解决办法

    在 Vue.js devtools 中看到,我们明明更改了仓库 state 中的数据,但是我们的 getters 就是值渲染一次之后就不再重新渲染了 解决方法:使用 Vue.set() 方法,就是专门 ...

  9. vue 中$index $key 已经移除了

    https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...

随机推荐

  1. TouchDelegate

    TouchDelegate(Rect bounds, View delegateView) Parameters: bounds Bounds in local coordinates of the ...

  2. dedecms中的内容页中的变量

    {dede:php runphp='yes'} var_dump($refObj->Fields); {/dede:php}

  3. mysql内置数据库

    1 mysql本地连接数据库 >mysql -h localhost -u root -proot    注意-p后面没有空格,是直接跟上密码 或者 >mysql -h localhost ...

  4. Codeforces Round #475 (Div. 2)

    B. Messages 题意:有n个消息分别在ti的时候收到.设所有消息收到时初始值为A,每过一秒,其值减去B.当在某一秒选择读某个消息时,获值为当前消息的值:如果在某一秒结束的时候,手上有k则消息未 ...

  5. DP专题·二

    1.hdu 1260 Tickets 题意:有k个人,售票员可以选择一个人卖,或者同时卖给相邻的两个人.问最少的售票时间. 思路:dp[i] = min(dp[i - 1] + singlep[i], ...

  6. 查看虚拟机操作系统、cpu核数、内存命令

    1.查看操作系统 在终端中执行下列指令:cat/etc/issue可以查看当前正在运行的 Ubuntu 的版本号.其输出结果类似下面的内容:Ubuntu 10.04 LTS \n \l方法二:使用 l ...

  7. 用cmd运行php代码、socket

    一.用cmd运行php代码,首先要对电脑进行配置: 1.右击计算机-属性-高级系统设置-环境变量,我们需要添加环境变量. 2.在Administrator的用户变量(U)下点击新建,弹出对话框,变量名 ...

  8. 日志体系——loging

    import loggingclass log: def __init__(self): # 文件的命名 self.logname=os.path.join(os.path.abspath(os.pa ...

  9. Mac 一键显示所有隐藏文件 不要那么六好吧

    系统应简洁而有效,对一般用户来说这一点尤为重要.不必要让普通用户知道的信息往往会给他们造成困扰,因而,隐藏掉他们便是个不错的选择,既可以保证系统平稳流畅运行,也可以为用户提供友好界面. 对于开发者而言 ...

  10. display:inline-block; 去除间隙的方法 总结：

    个人常用: 如: <ul> <li><a href="#" >实时数据</a></li> <li><a ...