<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. P5431 【模板】乘法逆元2

    洛谷题目链接 刚开始做乘法逆元还是有点懵逼的~ 以下式子都在模\(p\)意义下进行 我们把式子改一下,变成:\[\sum\limits_{i=1}^nk^i\times a_i^{-1}\] 我们先算 ...

  2. 变形和透视 perspective

    前面介绍了css3 2D变形(transform)移动.缩放.旋转.倾斜 有2D 也有3D,例如3D transform中有下面这三个方法: rotateX( angle ) rotateY( ang ...

  3. splay树 1285 宠物收养所

    #include<cstdio> #include<iostream> using namespace std; int shu[80004][2],n,size,root,k ...

  4. iptables防火墙--------基本操作

    查看规则 查看filter表中的规则 $ iptables -t filter -L 使用-t选项,指定要操作的表.使用-L 选项,查看-t选项对应表的规则,-L 选项的意思是,列出规则. ps : ...

  5. 【概率论】5-2:伯努利和二项分布(The Bernoulli and Binomial Distributions)

    title: [概率论]5-2:伯努利和二项分布(The Bernoulli and Binomial Distributions) categories: - Mathematic - Probab ...

  6. Pycharm使用常见问题

    Pycharm下载 下载链接:https://www.jetbrains.com/pycharm/download/ 分为专业版和社区版,社区版也能满足学习需求 Pycharm专业版激活 使用前请将& ...

  7. 好用的zookeeper客服端----Curator初探

    maven配置: <dependency> <groupId>org.apache.curator</groupId> <artifactId>cura ...

  8. 常用的os库笔记

    1.创建文件 import os os.mkdir('d:/log') 2.重命名文件 import os os.rename('d:/log','d:/newlog') 3.删除文件 import ...

  9. hive on tez

    hive运行模式 hive on mapreduce 离线计算(默认) hive on tez  YARN之上支持DAG作业的计算框架 hive on spark 内存计算 hive on tez T ...

  10. idea创建Web项目（基于Maven多模块）

    简述:通常我们开发的项目结构是由多个modules项目组合而成,并且由有个parent的maven项目整体管理.废话少说,直接进入创建过程. 创建parent项目 1.打开idea工具,按照下图操作, ...