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. js中新增的Symbol

    在ES6之前,js的的基本数据类型有String Number Null Boolean undefined Object6中数据类型,Symbol是一种新增加的基本数据类型 特性 Symbol 不需 ...

  2. 基础知识 Asp.Net MVC EF各版本区别

    原文:https://www.cnblogs.com/liangxiaofeng/p/5840754.html 2009年發行ASP.NET MVC 1.0版 2010年發行ASP.NET MVC 2 ...

  3. 【python爬虫】requests模块

    文档:从 pythoneer 到 pythonista 的100个模块 链接:http://note.youdao.com/noteshare?id=2b95bb3651c21af80ca1936f8 ...

  4. ros相关笔记

    catkin_make不编译某些package https://answers.ros.org/question/54181/how-to-exclude-one-package-from-the-c ...

  5. oracle学习笔记（十五） PL/SQL语法结构以及使用

    PL/SQL 简介 PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言. PL/SQL 是对 SQL 的扩展. 支持多种数据类型,如大对象和 ...

  6. MySQL 示例数据库

    微软 SQL Server 自带了一些示例数据库,可用于练习和测试.也可作为自己数据库设计时的参考.这些示例数据库开源在了 GitHub,可在 Microsoft/sql-server-samples ...

  7. WPF属性绑定实现双向变化

    WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面:同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的 ...

  8. HashMap框架源码深入解读，面试不用愁

    在Java Collections Framework的体系中中,主要有两个重要的接口,一个是List.Set和Queue所属的Collection,还有一个就是Map接口了.在上一篇文章中介绍了Li ...

  9. Java生鲜电商平台-订单中心服务架构与异常订单逻辑

    Java生鲜电商平台-订单中心服务架构与异常订单逻辑 订单架构实战中阐述了订单系统的重要性,并从订单系统的信息架构和流程上对订单系统有了总体认知,同时还穿插着一些常见的订单业务规则和逻辑.上文写到订单 ...

  10. 版本管理·玩转git(日志查看与版本切换)

    如果你想更清晰地学习git,你必须要了解3个重要区域. 工作区:即开发者的工作目录 暂存区:修改已被记录,但尚未录入版本库的区域 版本库:存储变化日志及版本信息 当你在工作区进行开发工作时,git会记 ...