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

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