v-if v-else-if v-else 条件渲染案例
<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 条件渲染案例的更多相关文章
- 证明 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 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 第六十三篇：Vue的条件渲染与列表渲染
好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...
- CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...
- 微信小程序-视图条件渲染
条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...
- 关于vue.js中条件渲染的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue#条件渲染
根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
随机推荐
- P3802 小魔女帕琪 期望
P3802 小魔女帕琪 期望 题面 题意稍微不清楚,题中的a[i]指的是属性i的魔法有a[i]个. 题目大意:有7种魔法,每种数量a[i],每次随机放出一个魔法,问放完为止出现7次魔法都不相同的期望次 ...
- P2736 “破锣摇滚”乐队 Raucous Rockers
题目描述 你刚刚继承了流行的“破锣摇滚”乐队录制的尚未发表的N(1 <= N <= 20)首歌的版权.你打算从中精选一些歌曲,发行M(1 <= M <= 20)张CD.每一张C ...
- spark源码之SparkContext
SparkContext可以说是Spark应用的发动机引擎,Spark Drive的初始化围绕这SparkContext的初始化. SparkContext总览 sparkcontxt的主要组成部分 ...
- C语言中怎样定义能够保存16进制整数的变量
可以通过int 或long int存储,16进制整数说到底还是整数,16进制只是一种记数方式.例如,int x=0x16;十六进制(hexadecimal)只是计算机中数据的一种表示方法,规则是“逢十 ...
- zabbix (一) 初识
1.什么是zabbix? Zabbix由Alexei Vladishev创建,目前由Zabbix SIA积极开发和支持. Zabbix是一种企业级开源分布式监控解决方案. Zabbix是监控底层存储( ...
- 最简单的SpringAop 小案例
网盘下载地址: 链接:https://pan.baidu.com/s/1Z-em-1ouWyXeMP3JW0IbCg 提取码:0o4o 1.目录结构: 2.配置文件 applicationCo ...
- 软件：IIS上配置CGI
本文的内容是:在Windows7中的IIS6.1中配置CGI功能. 我先讲步骤,步骤全用图来说明,以方便技术还是不熟练的朋友,以下是在Windows7系统来完成的. 目录 一.安装IIS步骤: 0X0 ...
- Linux shell脚本 （十二）case语句
case语句 case ... esac 与其他语言中的 switch ... case 语句类似,是一种多分枝选择结构. case 语句匹配一个值或一个模式,如果匹配成功,执行相匹配的命令.case ...
- PorterDuffXfermode之PorterDuff.Mode.SRC_IN
package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...
- 0.9.0.RELEASE版本的spring cloud alibaba nacos实例
简而言之,nacos与eureka的不同之处有三:后台老板.部署方式.功能.nacos是阿里的,eureka是奈飞的:nacos有自己的安装包,需要独立部署,eureka仅作为一个服务组件,引入jar ...