vue 使用key唯一令牌解决表单值混乱
vue在渲染元素时,出于效率考虑,会尽可能地复用已有元素的而非重新渲染,如果你不希望这样可以使用Vue中提供的key属性,它可以让你决定是否要复用元素,key值必须是唯一的
代码:
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>vue.js v-if语法使用 </title>
<script src="vue.js"></script>
</head>
<body>
<div ><!--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>