Vue.js v-if

🌙
手机阅读
本文目录结构

v-if

  • 预期any

用法

根据表达式的值的 truthiness 来有条件地渲染元素。

在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。详见列表渲染教程

参考

条件渲染 - v-if

用法

条件判断使用 v-if 指令:

随机生成一个数字,判断是否大于 0.5,然后输出对应信息:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="Math.random() > 0.5">
      大于5
    </div>
    <div v-else>
      小于5
    </div>
</div>

<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>

另一种写法

<div id="app">
  <div v-if="isShow">條正成立</div>
  <div v-else>條件不成立</div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isShow: true
  }
});

又一个用法

<div id="app">
  <div v-if="type === A">A</div>
  <div v-else-if="type === B">B</div>
  <div v-else>C</div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    type: "B"
  }
});

注意:v-if 可以配合 v-else 使用,也可以单独使用 。当配合 v-else 使用时,加有 v-else 的标签要紧跟加有 v-if 的标签之后,中间如果穿插其他标签,v-else 将永远不会显示出来,并会报错!

如果 v-if 后面跟的是布尔值,而非变量语句的时候,可以根据布尔值真假判断显示和不显示 ,

舍弃 v-else 用 v-if=“flag” 配合 v-if="!flag"来解决中间不可以穿插其他标签的问题,可见 v-if 配合 v-else 使用非常有局限性!

官网介绍的 v-if

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。

因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>