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

  作者： thtomatic  分类： Vue   评论: [ 0 ] 条  浏览: [ 907 ] 次

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>
    <br>
    <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>
效果:


以下为全部代码：

版权所有：《thtomatic》 => 《vue 使用key唯一令牌解决表单值混乱》
本文地址：https://ask.mykeji.net/Vue/237.html
除非注明，文章均为 《简单记录》 原创，欢迎转载！转载请注明本文地址，谢谢。


上一篇： vue v-show的使用
下一篇： Vue v-if,v-else-if,v-else的使用

发表评论：

    50.28ms