当前位置 : 主页 > 网页制作 > html >

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

来源:互联网 收集:自由互联 发布时间:2021-06-12
vue在渲染元素时,出于效率考虑,会尽可能地复用已有元素的而非重新渲染,如果你不希望这样可以使用Vue中提供的key属性,它可以让你决定是否要复用元素,key值必须是唯一的 代码: ! docty

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>
网友评论