Vue#条件渲染

根据不同的条件,响应不同的事件。

https://jsfiddle.net/miloer/zed5p1r3/

可以用template来包装元素,当然浏览器的最终渲染结果不会包含它。我觉得主要用它来自定义模块组件。

<template v-if=“msg”>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

发现个小问题当JS代码有误的时候,类似于这样,title 后的Vue的逗号是全角的,我以为什么都不会输出,但是JS解析MSG为‘no’j就像这样

https://jsfiddle.net/miloer/zed5p1r3/1/

var vm = new Vue({
     el:"#app",
     data:{
      msg:‘true‘,
     title:‘Vue‘,
     ok:‘ture‘
   }
})

v-show元素不支持template,v-show的元素始终渲染并保持在DOM中。

v-eles 元素必须紧跟在v-show或者v-if元素模块后,要不然就没法识别了。

关于v-if和v-show使用方法的官方说明:

在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

v-if

  • 类型: *
  • 用法:

    根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>,将提出它的内容作为条件块。
  • 另见: 条件渲染

v-show

  • 类型: *
  • 用法:

    根据表达式的值的真假切换元素的 display CSS 属性,如果有过渡将触发它。
  • 另见: 条件渲染 – v-show

v-else

  • 不需要表达式
  • 限制: 前一兄弟元素必须有 v-if 或 v-show
  • 用法:

    为 v-if 和 v-show 添加 “else 块”。

    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
  • 另见: 条件渲染 – v-else

template

  • 类型: String
  • 详细:

    实例模板。模板默认替换挂载元素。如果 replace 选项为 false,模板将插入挂载元素内。两种情况下,挂载元素的内容都将被忽略,除非模板有内容分发 slot。

    如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

    注意在一些情况下,例如如模板包含多个顶级元素,或只包含普通文本,实例将变成一个片断实例,管理多个节点而不是一个节点。片断实例的挂载元素上的非流程控制指令被忽略。

  • 另见:
时间: 2024-11-03 21:23:34

Vue#条件渲染的相关文章

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]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,有更