简单理解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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
学习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验证码函数的使用示例
2013/05/03 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
js活用事件触发对象动作
2008/08/10 Javascript
清空上传控件input file的值
2010/07/03 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python计算方程式根的方法
2015/05/07 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
自我评价优秀范文分享
2013/11/30 职场文书
纪检监察建议书
2014/05/19 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
党校学习党性分析材料
2014/12/19 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
MySQL添加索引特点及优化问题
2022/07/23 MySQL