简单理解Vue条件渲染

一、v-if显示单个元素

注意else只能跟在v-if或者v-show后面

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="test">
 <div v-if="isDisplay"> <!--if...else... 单个元素-->
 显示我1
 </div>
 <div v-else>
 显示我2
 </div>
 </div>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

输出结果是:显示我1

二、v-if显示多个元素,需配合<template>

注意else只能跟在v-if或者v-show后面

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="test">
 <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
 <div>显示我1</div>
 <div>显示我11</div>
 <div>显示我12</div>
 <div>显示我13</div>
 </template>
 <div v-else>
 显示我2
 </div>
 </div>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

输出结果: 显示我1 显示我11 显示我12 显示我13

三、v-show只支持单元素显示,不支持<template>包含的多元素

注意else只能跟在v-if或者v-show后面

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="test">
 <div v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
 显示我1
 </div>
 <div v-else>
 显示我2
 </div>
 </div>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

四、v-if与v-show的区别

(1)v-if是真实的渲染与卸载,只不过第一次渲染后,会将结果缓存一下

(2)v-show元素始终被编译并保留，只是简单地基于 CSS 切换

(3)总结: 如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 学习vue.js条件渲染

    本文实例为大家分享了vue.js中条件渲染的练习代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> </head> <body> <!-- v-if 作为判断条件 如果满足则展示它所附着的元素的内容-->

  • vue.js实现条件渲染的实例代码

    vue.js实现条件渲染的实例代码

    一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=

  • 简单理解Vue条件渲染

    一.v-if显示单个元素 注意else只能跟在v-if或者v-show后面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-sca

  • vue 条件渲染v-if和v-show

    vue 条件渲染v-if和v-show

    目录 1.v-if 2.在<template>上使用v-if 3.用key管理可复用的元素 4.v-show 4.1v-if对比v-show 1.v-if 在模板中,可以根据条件进行渲染.条件用到的是v-if.v-else-if以及v-else来组合实现的. 示例代码如下: <div id="app"> <p v-if="weather == 'sun'">今天去公园玩!</p> <p v-else-if=&qu

  • Vue条件渲染与列表渲染

    Vue条件渲染与列表渲染

    目录 一.Vue条件渲染 v-show v-if v-else-if v-else v-if 与 template 小结 二.列表渲染 v-show key的作用 1.虚拟DOM中key的作用 2.对比规则 3.用index作为key可能会引发的问题 4.开发中如何选择key? react.vue中的key有什么作用?(key的内部原理) 一.Vue条件渲染 v-show <!--使用v-show做条件渲染--> <h1 v-show="false">{{nam

  • 简单理解Vue中的nextTick方法

    简单理解Vue中的nextTick方法

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1&q

  • 简单理解vue中track-by属性

    简单理解vue中track-by属性

    本文实例为大家解析了vue中track-by的属性,供大家参考,具体内容如下 api:http://cn.vuejs.org/guide/list.html#track-by 示例地址:https://jsfiddle.net/stardew/f1eju0ku/5/ 无track-by情况:数据修改时,无论值是否被修改,dom都被重新渲染(控制台可以看到) 加入track-by属性:数据修改时,不变数据所在的dom不被重新渲染,已改变的数据所在dom才被重新渲染 track-by的两种使用方法:

  • 简单理解vue中Props属性

    本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项 声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以

  • 简单理解vue中实例属性vm.$els

    vue实例属性vm.$els到底是什么?有哪些需要注意的?具体请阅读本文. 不需要表达式 参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:someEl 将转为全小写.可以用 v-el:some-el 设置 this.$els.someEl. 我的理解:$els类似于document.querySelector('.class')的功能,可以拿到指定的dom元素.

  • 简单理解vue中el、template、replace元素

    本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el

  • Vue基础教程之条件渲染和列表渲染

    目录 前言 1.1 作用 1.2 控制元素显隐的方式 1.3 初始渲染对比 1.4 切换消耗对比 1.5 使用场景对比 1.6 其他 2 v-if 和 v-for 2.1 v-if 和 v-for 不能同时用的原因 2.2 v-if 和 v-for 一起用的解决方案 3 列表渲染的 key 有什么用 总结 前言 什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活动页面只在今天有效,在晚上的24点或者说在明天早上凌晨0点1秒的时候就要把这个页面下下来,把这个

  • 深入理解Vue 的条件渲染和列表渲染

    这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去.然而如果要切换很多元素的时候,一个个的添加就太麻烦了.这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if.最终的渲染结果不会包含 < template > 元素. <template

随机推荐