<body>
<!--修饰符-->
<div id="app">
    <span v-if="isuser">
        <label for="use">用户账号</label>
        <input type="text" id="use">
    </span>
    <span v-else="!isuser">
        <label for="use2">用户邮箱</label>
        <input type="text" id="use2">
    </span>
    <button @click="isuser=!isuser">切换类型</button>
</div>

<script>
   const app=new Vue({
       el:'#app',
       data:{
          isuser:true
       },
       methods:{
       }
   })

</script>

思考小问题：即交换之后里面的内容不会发生改变
vue在将dom显示在浏览器之前，需要先放在内存的v-dom虚拟dom，之后再放在浏览器上面，放的过程中会
处于性能考虑，会对不同的内容进行修改，但是对于相同的部分会直接进行保留。


<!--修饰符-->
<div id="app">
    <span v-if="isuser">
        <label for="use">用户账号</label>
        <input type="text" id="use" key="username"><!--通过键入key的方式进行修改-->
    </span>
    <span v-else="!isuser">
        <label for="use2">用户邮箱</label>
        <input type="text" id="use2" key="user2">
    </span>
    <button @click="isuser=!isuser">切换类型</button>
</div>

<script>
   const app=new Vue({
       el:'#app',
       data:{
          isuser:true
       }
   })

</script>

v-if v-else-if v-else 条件渲染案例的更多相关文章

  1. 证明 U and V={0}时 dim(U+V)=dim(U)+dim(V)

    U And V={0} 证明 dim(U+V)=dim(U)+dim(V)设{u1,u2,...,uk} 是U的基,{v1,v2...,vr}是V的基,dim(U)=k ,dim(V)=r dim(U ...

  2. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  3. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  4. 第六十三篇：Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  5. CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率

    CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...

  6. 微信小程序-视图条件渲染

    条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...

  7. 关于vue.js中条件渲染的练习

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

  8. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

  9. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

随机推荐

  1. /etc/crontab

  2. linux系列（二十一）：chmod命令

    1.命令格式 chmod [-cfvR] [--help] [--version] mode file 2.命令功能 用于改变文件或目录的访问权限,用它控制文件或目录的访问权限. 3.命令参数 必要参 ...

  3. vim命令整理

    最近使用vim比较多,整理一下!

  4. Input类中常用的验证方式

    Deolin一般将Input类对象作为POST请求方法的参数, Input类的域与前端的数据结构一一对应,由于后端不应该相信前端传过来的任何数据, 所以前端的数据对象先绑定到Input对象中,通过JS ...

  5. 10月清北学堂培训 Day 1

    今天是杨溢鑫老师的讲授~ T1 1 题意: n * m 的地图,有 4 种不同的地形(包括空地),6 种不同的指令,求从起点及初始的状态开始根据指令行动的结果. 2 思路:(虽然分了数据范围但是实际上 ...

  6. maven引入第三方jar包

    maven有两种文件解析和分配策略,也就是我们常说的artifacts(依赖). 第一种是本地仓库,这是你缓存在本地的依赖.默认在${user.home}/.m2/repository目录下;当mav ...

  7. hadoop namenode启动失败

    hadoop version=3.1.2 生产环境中,一台namenode节点突然挂掉了,,重新启动失败,日志如下: Info=-64%3A1391355681%3A1545175191847%3AC ...

  8. python3 系统监控脚本（CPU，memory，网络，disk等）

    #!/usr/bin/env python3 #create at 2018-11-30 'this is a system monitor scripts' __author__="yjt ...

  9. [信息收集]11种绕过CDN查找真实IP方法【转载】

    今天在看一些有关CDN的文章的时候,发现一篇写的蛮好的文章,故转载过来. 原文链接:https://www.cnblogs.com/qiudabai/p/9763739.html 0x01 验证是否存 ...

  10. 安装virtual box

    将安装包放在app目录下: 进入安装目录,输入sudo gdebi 安装包名 安装完后,可以在搜索框中搜索:virtual 会出现安装好的虚拟机盒子.