简单理解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实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
JS验证字符串功能
Feb 22 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
JS异步处理的进化史深入讲解
Aug 25 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
Vue实现省市区三级联动
Dec 27 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Python性能优化的20条建议
2014/10/25 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
车间操作工岗位职责
2013/12/19 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
国贸专业求职信
2014/06/28 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang