2-5 2.3.1模板条件渲染ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《2-5 2.3.1模板条件渲染ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《2-5 2.3.1模板条件渲染ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2-5 2.3.1 模板条件渲染教学课件 Vue.js 基础与应用开发实战（微课版）2.3.1 模板条件渲染在Vue中，依靠条件指令实现条件逻辑渲染，条件指令包括v-if、v-else、v-else-if三个。1v-if 根据表达式值的真假对元素进行条件渲染。赋值为true时，将元素插入DOM中，否则对应元素从DOM中移除。因此，Vue里的v-if指令类似于模板引擎的if条件语句。【实例2-8】使用v-if指令控制元素的显示或隐藏【操作要求】使用v-if指令控制对应#app元素的显示或隐藏。【实现过程】使用HTML编辑器Dreamweaver创建网页0208.html，在该文件编写以下代码实现

2、要求的功能。message var vm=new Vue(el:#app,data:message:你好！plus会员,show:true)上面代码中，如果show的值为true，则对应#app元素显示，否则将从DOM中移除。如果想切换多个元素，可以把一个元素当做包裹元素，并在上面使用v-if。最终的渲染结果不会包含元素。【实例2-9】使用v-if指令结合元素控制多个元素的显示或隐藏【操作要求】使用一个元素当做包裹元素，并在上面使用v-if。根据变量show的逻辑值控制标题与多个段落的显示或隐藏。【实现过程】使用HTML编辑器Dreamweaver创建网页0209.html，在该文件编写以下代

3、码实现要求的功能。title Paragraph 1 Paragraph 2 var vm=new Vue(el:#app,data:show:true,title:注册协议)2v-else-if 表示v-if的“else if 块”，可以链式调用。前一兄弟元素必须有v-if或v-else-if。3v-else用于为v-if或者v-else-if添加“else 块”，前一兄弟元素必须有v-if或v-else-if。【实例2-10】使用v-if和v-else指令实现条件渲染【操作要求】使用v-if和v-else指令实现条件渲染，根据变量display设置的逻辑值输出不同内容，变量display的

4、值为逻辑真时对应输出“你好！plus会员”，为逻辑假时对应输出“你好，请登录”。【实现过程】使用HTML编辑器Dreamweaver创建网页0210.html，在该文件中编写代码实现要求的功能。info1 info2 var vm=new Vue(el:#main,data:info1:你好！plus会员,info2:你好，请登录,display:false)【实例2-11】使用v-if、v-else-if和v-else指令实现条件渲染【操作要求】使用v-if、v-else-if和v-else指令实现条件渲染，根据变量rank的取值输出不同的内容：当变量rank的值为“vip”时输出“你好！v

5、ip会员”，当变量rank的值为“plus”时输出“你好！plus会员”，否则输出“你好！请登录”。【实现过程】使用HTML编辑器Dreamweaver创建网页0211.html，在该文件中编写以下代码实现要求的功能。你好！vip会员 你好！plus会员 你好！请登录 var vm=new Vue(el:#main,data:rank:plus)4元素不复用Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。【实例2-14】使用v-if和v-show指令分别实现元素的显隐【操作要求】使用v-if和v-show指令分别实现元素的显隐，使用v-if指令判断变量rank的值大于1，则

6、输出“你好！plus会员”，使用v-show指令判断变量rank的值小于1，则输出“欢迎登录”。【实现过程】使用HTML编辑器Dreamweaver创建网页0213.html，在该文件中编写以下代码实现要求的功能。1你好！plus会员 p v-show=rank欢迎登录 var vm=new Vue(el:#app,data:rank:2)上面代码中，如果rank1，则使用了指令v-if的p元素显示；否则（rank1）使用了v-show的p元素显示。当rank=1时，使用了指令v-if的p元素直接从DOM移除，而使用了v-show的p元素的display属性值为none。快乐学习！高效学习！祝学习进步！