【vue】条件渲染 v-if v-else

1.Vue 提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可:

<template v-if="loginType === ‘username‘">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

  现在,每次切换时,输入框都将被重新渲染。

原文地址:https://www.cnblogs.com/whblogs/p/10469462.html

时间: 2024-10-25 10:51:42

【vue】条件渲染 v-if v-else的相关文章

vue条件渲染

v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}} 在 Vue.js ,我们使用 v-if 指令实现同样的功能: <h1 v-if="ok">Yes</h1> 也可以用 v-else 添加一个 "else" 块: <h1 v-if="ok"&g

Vue#条件渲染

根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定义模块组件. <template v-if=“msg”><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template> 发现个小问题当JS代码有误的时候,

[vue]vue条件渲染v-if(template)和自定义指令directives

条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <div v-show="false">yes</div> <!--<div v-else>no</div>--> <h1>v-for: 判断1</h1> <div v-if="false"&

(尚008)Vue条件渲染

1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件渲染</title></head><body><!--1.条件渲染指令 v-if v-else 上面两个做影藏是是通过把标签移除,需要再创建一个在显示出来 v-show 通过样式来影藏,内存中对象还

关于vue.js中条件渲染的联系

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件渲染</title></head><body> <!-- v-if 作为判断条件 如果满足则展示它所附着的元素的内容--> <!-- 除了v-if 还可以配合使用v-else--> <div

【03】Vue 之列表渲染及条件渲染

3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v-if的指令,帮助我们完成判断的模板处理. <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <!-- 当ok为tr

VUE:条件渲染和列表渲染

条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.条件渲染指令 v-if v-else 移除标签 v-show 通过样式隐藏 2.比较 v-if 与v-show 如果需要频繁切换 v-show 较好 --> <div id="

浅析Vue.js 中的条件渲染指令

1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div

Vue.js 实战教程 V2.x(9)条件渲染

9条件渲染 9.1 v-if v-if 指令用于条件性地渲染一块内容. <h1 v-if="awesome">Vue is awesome!</h1> 在 <template> 元素上使用 v-if 条件渲染分组 <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</

4.vue的v-if和v-show条件渲染

代码如下, 1. v-if用于条件渲染-必须条件为真,才会渲染  判断taye的值,就是JavaScript的表达式,满足条件为B则B 显示 ,v-if是真正的条件渲染,不满足不渲染,也为惰性渲染 2.v-show 用于根据条件展示某一个元素, 如果满足,则显示,如果不满足, 则为隐藏, 页面可检查到元素, 展示方式为 display: none; ,不管什么条件都渲染, 通过css隐藏和展示 3.如果频换的切换v-show, v-show更高的初始化开销 4.如果运行条件很少改变v-if,有更