<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. $noip2018$游记+考后总结

    游记部分 Day-5 - Day0 敲了敲模板,打了几场模拟赛,都在颓废,其他什么都没做 Day1 早上继续写模板,水了会QQ,其他什么都没做 中午试图背模板,没成功(其实下午才发现敲的模板一个没用上 ...

  2. spring boot 扫描 其他jar包里面的 mapper xml

    启动类配置扫描 goods.mapper为当前项目mapper路径 ,common.mpper为其他jar包. 1. 2.mybatis.mapper-locations=classpath*:map ...

  3. ZROI Day6比赛总结

    比赛还没结束而且我没有参加比赛就来这里了. T1 略 T2 设\(ans_d\)表示\(d|b_i\)的方案数(最后反演一下就可以) 设\(d\not|a_i\)的个数为\(l\)(可以\(O(n\l ...

  4. Tree-shaking

    Tree-shaking 字面意思就是 摇晃树, 其实就是去除那些引用的但却没有使用的代码. Tree-shaking 概念最早由 Rollup.js 提出,后来在 webpack2 中被引入进来,但 ...

  5. Airflow 配置celery+rabbitmq和celery+redis

    Airflow 配置celery+rabbitmq 1.安装celery和rabbitmq组件 pip3 install apache-airflow[celery] pip3 install apa ...

  6. mysql的存储引擎与锁

    一.背景知识 1.锁是计算机协调多个进程或线程并发访问某一资源的机制. A.锁分类. | 共享锁(读锁):在锁定期间,多个用户可以读取同一个资源,读取过程中数据不会发生变化. | 排他锁(写锁):在锁 ...

  7. P1613 跑路——倍增思想，floyd

    https://www.luogu.org/problemnew/show/P1613 他有一个跑路机器,每次只能跑2k   (单位)路程,每相邻两个点的路程为1,也就是说如果连边1——>2—— ...

  8. .vue的文件在vscode里面是白色?

    https://cnodejs.org/topic/58b8cac17872ea0864fee2ee 要装一个 vetur的插件

  9. flume 诞生背景 数据同步

    flume一开始是cloudlera的项目 当时他们的工程师需要一次次地为客户编写工具 来实现数据的自动化导入

  10. git 初次提交

    前提:已经关联了ssh到本地,不用再输入用户名和密码 知道仓库地址:https://xxx.xxx.com/aiotcloud/yihao01-node-js.git 第一步:进入本地文件夹执行 gi ...