<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. package.json 与 package-lock.json 的区别

    根据官方文档,这个package-lock.json 是在 `npm install`时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号. 它有什么用呢?因为n ...

  2. 【原创】go语言学习（十二）struct介绍1

    目录: struct声明和定义 struct的内存布局以及构造函数 匿名字段和struct嵌套 struct与tag应用 struct声明和定义 1.Go中面向对象是通过struct来实现的, str ...

  3. php cookie 操作

    创建 cookie <?php setcookie(); ?> 取回 Cookie 的值 <?php // Print a cookie echo $_COOKIE["us ...

  4. [bzoj 4566][Haoi 2016]找相同字符

    传送门 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. Solution 考虑用SAM,采用较为轻 ...

  5. tomcat设置gzip

    使用tomcat发布3dtiles或terrain数据遇到的gzip问题 问题一 对大于1KB的json请求进行gzip压缩,json为原文件 1.创建原始文件 2.设置 在apache-tomcat ...

  6. OpenFOAM 中的边界条件（二）【转载】

    转载链接:http://xiaopingqiu.github.io/2016/04/02/Boundary-conditions-in-OpenFOAM2/ 本篇在上一篇的基础上来解读 OpenFOA ...

  7. Centos 7设置静态IP,修改时区,关闭防火墙

    Centos 7设置静态IP # vi /etc/sysconfig/network-scripts/ifcfg-enxxx BOOTPROTO="static" ...... I ...

  8. 1.linux 基本操作和命令

    整理复习之前的linux学习笔记,正好贴出来了.   1.[root@chen ~]#    [当前登录用户@主机名  当前所在目录]# 当前用户身份     #号表示管理员root     $号表示 ...

  9. jQuery Ajax calls and the Html.AntiForgeryToken()

    jQuery Ajax calls and the Html.AntiForgeryToken() https://stackoverflow.com/a/4074289/3782855 I use ...

  10. 016-mac下ps

    参看 http://www.ddooo.com/softdown/65448.htm#dltab 1.下载 安装运行:断网后,双击Photoshop CS6.dmg进入安装界面 2.安装提示:安装程序 ...