简单理解Vue条件渲染


Posted in Javascript onDecember 03, 2016

一、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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中 用户登录系统的解决办法
Apr 15 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
jquery实现全屏滚动
Dec 28 Javascript
javascript的BOM
May 03 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
学习vue.js条件渲染
Dec 03 #Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 #Javascript
jquery 判断div show的状态实例
Dec 03 #Javascript
利用浮层使select不可选的实现方法
Dec 03 #Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 #Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 #Javascript
jquery 多个radio的click事件实例
Dec 03 #Javascript
You might like
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php 字符串替换的方法
2012/01/10 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
javascript中的隐式调用
2018/02/10 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
python 数据加密代码
2008/12/24 Python
python安装Scrapy图文教程
2017/08/14 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python中的函数作用域
2018/05/07 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python Merge函数原理及用法解析
2020/09/16 Python
django中cookiecutter的使用教程
2020/12/03 Python
美国电视购物:QVC
2017/02/06 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
Java的基础面试题附答案
2016/01/10 面试题
理货员的岗位职责
2013/11/23 职场文书
自我鉴定书
2014/03/24 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
培养联系人考察意见
2015/06/01 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
python中__slots__节约内存的具体做法
2021/07/04 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript