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>

vue 使用key唯一令牌解决表单值混乱的更多相关文章

  1. 015——VUE中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

  3. mysql执行带外键的sql文件时出现mysql ERROR 1215 (HY000): Cannot add foreign key constraint的解决

    ERROR 1215 (HY000): Cannot add foreign key constraint 最近在建表时遇到了这个错误,然后找了下找到了解决办法,记录下: 本来是要建两张表: 1 2 ...

  4. jq获取表单值与赋值代码

    jq获取表单值与赋值代码 jq获取表单值与赋值代码 $("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var ...

  5. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  6. java web解决表单重复提交

    首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提交?2.什么情况下会出现表单重复提交?3.什么情况需要避免表单重复提交? 什么叫表单提交问题,说白了,就是同一份信息,重 ...

  7. vue中怎么动态生成form表单

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  8. 将Jquery序列化后的表单值转换成Json

    From: https://segmentfault.com/a/1190000000473625 小朋友有一个表单,他想以Json的方式获取到表单的内容.小朋友尝试了以下方式. 通过$(" ...

  9. javascript获取表单值的7种方式

    见代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. python第三次作业-mooc笔记

    1.注册中国大学MOOC 2.选择北京理工大学嵩天老师的<Python网络爬虫与信息提取>MOOC课程3.学习完成第0周至第4周的课程内容,并完成各周作业 4.提供图片或网站显示的学习进度 ...

  2. Java内存中的常量池

    1,java内存模型简介 <深入理解java虚拟机>里将java内存分为如下五个模块: 堆-堆是所有线程共享的,主要用来存储对象. 其中,堆可分为:新生代和老年代两块区域.使用NewRat ...

  3. 再一次生产 CPU 高负载排查实践

    前言 前几日早上打开邮箱收到一封监控报警邮件:某某 ip 服务器 CPU 负载较高,请研发尽快排查解决,发送时间正好是凌晨. 其实早在去年我也处理过类似的问题,并记录下来:<一次生产 CPU 1 ...

  4. IT兄弟连 HTML5教程 HTML5的曲折发展过程 浏览器之间的大战

    播放电影和音乐要使用播放器,浏览网页就需要使用浏览器.浏览器虽然只是一个设备,并不是开发语言,但在Web开发中必不可少,因为浏览器要去解析HTML5.CSS3和JavaScript等语言用于显示网页, ...

  5. 【面试】Java中sleep和wait的区别

    1.sleep方法是Thread类的静态方法: wait方法是Object类的成员方法 2.sleep方法使当前线程暂停执行指定的时间,让出cpu给其他线程,但是它的监控状态依然保持着,当指定的时间到 ...

  6. 如何在GibHub上传自己的项目

    如何上传项目至GinHub 准备好项目.在项目ssm-crud的目录下右击,点击Git Bash Here,打开git命令行. 在命令行中,输入git init,使项目文件夹加入git管理: 输入gi ...

  7. 用canvas写一个简易画图工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. xml的解析(概述)

    使用java解析xml☆☆☆ 四个类:分别是针对dom和sax解析使用的类   -dom :     DocumentBuilder:解析器类       -这个类是个抽象类,不能new,       ...

  9. 962. Maximum Width Ramp

    本题题意: 在数组中,找到最大的j-i,使得i<j and A[i] <= A[j] 思路: 维持一个递减的栈,遇到比栈顶小的元素,进栈: 比大于等于栈顶的元素-> 找到栈中第一个小 ...

  10. 如何开发优质的 Flutter App：Flutter App 软件测试指南

    继上一场GitChat文章发布之后,博主又为朋友们带来另一场Chat.这一次我们主要聊一聊Flutter App的测试环节. 众所周知,应用的功能越多,手动测试的难度就越大.一套完整的自动化测试将帮助 ...