zoukankan      html  css  js  c++  java
  • vue 使用key唯一令牌解决表单值混乱

    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>
  • 相关阅读:
    052-34
    052-33
    052-32
    052-31
    052-30
    052-28
    react组件之间通信
    排序算法
    点外卖
    js的各种排序算法
  • 原文地址:https://www.cnblogs.com/tommymarc/p/11627488.html
Copyright © 2011-2022 走看看