<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. PHP全栈学习笔记26

    php 验证码 <?php /* *@Author: 达叔小生 **/ header("Content-type:image/png"); // 发送头部信息,生成png图片 ...

  2. epoll反应堆模型代码

    libevent函数库核心思想 /*** epoll_loop.c ***/ #include<stdio.h> #include<sys/epoll.h> #include& ...

  3. RBF、GRNN 和 PNN 神经网络在Matlab中的用法

    一.RBF神经网络 RBF神经网络概述 径向基函数神经网络 与 BP 神经网络的区别在于训练过程--其参数初始化具有一定方法,并非随机,隐含层的末尾使用了径向基函数,它的输出经过加权和得到 LW2.1 ...

  4. liunx系统下crontab定时启动Scrapy爬虫程序

    定时启动爬虫 # 查看命令得绝对路径 # which scrapy # cd到爬虫得项目目录下 + scrapy命令得绝对路径 + 启动命令 */5 * * * * cd /opt/mafengwo/ ...

  5. 启动Django项目报错

    今天一时手欠将电脑名字改成了中文,在启动Django或Flask项目的时候一直报下面的错误 问题描述: 环境配置成功,Django成功pip,运行项目报错,浏览器输入127.0.0.1:8000报错 ...

  6. Java基础系列 - 子类继承父类，调用父类的构造函数

    package com.test7; public class test7 { public static void main(String[] args) { Son son = new Son(1 ...

  7. （转）hive调优(1) coding调优

    hive 调优(一)coding调优 本人认为hive是很好的工具,目前支持mr,tez,spark执行引擎,有些大公司原来封装的sparksql,开发py脚本,但是目前hive支持spark引擎(不 ...

  8. 微信小程序--更换用户头像/上传用户头像/更新用户头像

    changeAvatar:function (){ var that=this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'c ...

  9. C# 控制反转

    主要目的:需要在业务逻辑层调用UI的弹框提示信息代码是在记事本中写的,没有运行调试过,不保证能直接使用,看下思路就好 //接口public interface IShowData { void Sho ...

  10. 【Java】Unicode和字符串互转

    Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一 ...