《Vue 3基础入门》课件 第三章Vue 3基本指令.pptx

《Vue 3基础入门》课件 第三章Vue 3基本指令.pptx

  1. 1、本文档共30页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多

Vue3基本指令

Contents目录条件渲染指令01列表渲染指令v-for02数据绑定指令v-bind03v-model与表单04

01条件渲染PART

Vue3基本指令0102条件渲染指令条件渲染指令的主要功能是根据指令的值为true或false进而触发组件不同的表现形式。指令的主要职责是在其值发生改变时,将相应的影响作用于DOM对象。divid=apph1v-if=displayDisplay/h1h1v-if=hideHide/h1h1v-if=age=25Age:{{age}}/h1h1v-if=name.indexOf(Tom)=0Name:{{name}}/h1/divscriptconstvm=Vue.createApp({data(){return{display:true,hide:false,age:28,name:TomCruise}}}).mount(#app);/script右侧代码使用v-if、v-else-if和v-else,这三个指令用于实现条件判断,在true和false之间切换时,元素或组件将被销毁或重建。v-if、v-else-if、v-else

渲染结果将age属性的值修改为20(即vm.age=20),然后切换回元素窗口,渲染结果如图

注意0102如需控制多个元素的创建或删除,可以使用template元素将这些元素包装起来,然后在template元素上使用v-if指令。divid=apptemplatev-if=!isIoginformpusername:inputtype=text/pppassword:inputtype=password/p/form/template/divscriptconstvm=Vue.createApp({data(){return{isLogin:false}}}).mount(#app);/script需要特别注意的是:当一个条件被满足时,后续的条件判断都不会再执行,v-else-if和v-else需要紧跟在v-if或v-else-if之后。

Vue3基本指令0102条件渲染指令条件渲染指令的主要功能是根据指令的值为true或false进而触发组件不同的表现形式。指令的主要职责是在其值发生改变时,将相应的影响作用于DOM对象。divid=apph1v-show=displayDisplay/h1h1v-show=hideHide/h1h1v-show=age=25Age:{{age}}/h1h1v-show=name.indexOf(Tom)=0Name:{{name}}/h1/divscriptconstvm=Vue.createApp({data(){return{display:true,hide:false,age:28,name:TomCruise}}}).mount(#app);/scriptv-show指令根据其值切换元素的CSS样式中的display属性,当条件变化时,该指令会触发过渡效果,代码如下。v-show指令

V-show渲染结果从页面的展示效果来看,v-show与v-if似乎没有不同,但在页面结构中可以发现,v-show并没有根据条件不同而改变页面结构.v-show的值是true还是false,v-show指令都会创建元素,它通过CSS样式中的display属性来控制元素是否显示。当v-if的值为false时,v-if指令不会创建该元素。只有当v-if的值为true时,v-if指令才会真正创建该元素。

02列表渲染PART

Vue3基本指令0102列表渲染指令列表渲染指令的主要功能是根据数组的值来进行列表的遍历循环。从而快速的渲染html结构,使代码具有整洁性,开发的快速和便捷性。ulid=array-renderingliv-for=iteminitems{{item.message}}/li/ulscriptconstvm=Vue.createApp({data(){return{items:[{message:Foo},{mess

文档评论(0)

xiaobao + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档