Vue#条件渲染

时间：2024-12-06 12:06:44

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

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"> 包含模板。

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

  • 另见：

相关文章