Vue3——条件判断指令

条件判断指令1、v-if指令1.1、基本用法1.2、判断一组元素2、v-else指令3、v-else-if指令4、v-show指令5、如何选择v-if和v-show1、v-if指令1.1、基本用法v-if指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素。如果表达式的值为true就输出DOM元素及其包含的子元素否则就将DOM元素及其包含的子元素移除。例如输出用户的年龄并判断该年龄是否小于18如果是则输出用户未成年。代码如下dividapppTom的年龄是{{age}}/ppv-ifage 18Tom未成年/p/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{age:16}}}).mount(#app);//装载应用实例的根组件/script1.2、判断一组元素v-if是一个指令必须将它添加到一个元素上根据表达式的结果判断是否输出该元素。如果要对一组元素进行判断则需要使用template元素作为包装元素并在该元素上使用v-if最后的渲染结果里不会包含template元素。例如根据表达式的结果判断是否输出一组单选按钮。代码如下div idapptemplate v-ifshowinput typeradiovalue手机手机input typeradiovalue电脑电脑input typeradiovalue家电家电input typeradiovalue家具家具/template/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typetext/javascriptconstvmVue.createApp({data(){return{show:true}}}).mount(#app);//装载应用实例的根组件/script2、v-else指令v-else指令的作用相当于JavaScript中的else语句部分的作用。可以将v-else指令配合v-if指令一起使用。例如输出用户的年龄并判断该年龄是否小于18如果是则输出用户未成年否则输出用户已成年。代码如下dividapppTom的年龄是{{age}}/ppv-ifage 18Tom未成年/ppv-elseTom已成年/p/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{age:20}}}).mount(#app);//装载应用实例的根组件/script示例判断2023年2月份的天数。应用v-if指令和v-else指令判断2023年2月份的天数代码如下dividapppv-if(year % 4 0 year % 100 ! 0) || year % 400 0{{show(29)}}/ppv-else{{show(28)}}/p/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{year:2023}},methods:{show:function(days){alert(this.year年2月份有days天);}}}).mount(#app);//装载应用实例的根组件/script3、v-else-if指令v-else-if指令的作用相当于JavaScript中的else if语句部分的作用。应用该指令可以进行更多的条件判断不同的条件对应不同的输出结果。例如输出数据对象中的属性m和n的值比较两个属性的值输出比较的结果。代码如下div idapppm的值是{{m}}/ppn的值是{{n}}/pp v-ifm nm小于n/pp v-else-ifm nm等于n/pp v-elsem大于n/p/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typetext/javascriptconstvmVue.createApp({data(){return{m:16,n:16}},}).mount(#app);//装载应用实例的根组件/script示例判断当前的季节。获取当前的月份并判断当前月份属于哪个季节。代码如下div idappp当前月份是{{month}}月/pdiv v-ifmonth 1 month 3当前月份属于春季/divdiv v-else-ifmonth 4 month 6当前月份属于夏季/divdiv v-else-ifmonth 7 month 9当前月份属于秋季/divdiv v-else当前月份属于冬季/div/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typetext/javascriptconstvmVue.createApp({data(){return{month:newDate().getMonth()1}},}).mount(#app);//装载应用实例的根组件/scriptv-else指令必须紧跟在v-if指令或v-else-if指令的后面否则v-else指令将不起作用。同样v-else-if指令也必须紧跟在v-if指令或v-else-if指令的后面。4、v-show指令v-show指令是根据表达式的值来判断是显示还是隐藏DOM元素。当表达式的值为true时元素将被显示当表达式的值为false时元素将被隐藏此时为元素添加了一个内联样式style“display:none”。与v-if指令不同对于使用v-show指令的元素无论表达式的值为true还是false该元素始终会被渲染并保留在DOM中。绑定值的改变只是简单地切换元素的CSS属性display。v-show指令不支持template元素也不支持v-else指令。示例切换图片的显示和隐藏。定义一个按钮通过单击该按钮切换图片的显示和隐藏。代码如下dividappinputtypebutton:valuebTextv-on:clicktoggledivv-showshowimgsrcimages/75.jpg/div/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{bText:隐藏图片,show:true}},methods:{toggle:function(){this.bText隐藏图片?this.bText显示图片:this.bText隐藏图片;this.show!this.show;}}}).mount(#app);//装载应用实例的根组件/script5、如何选择v-if和v-showv-if和v-show实现的功能类似但是两者也有着本质的区别。下面列出v-if和v-show这两个指令的主要不同点。在进行v-if切换时因为v-if中的模板可能包括数据绑定或子组件所以Vue.js会有一个局部编译卸载的过程。而在进行v-show切换时仅发生了样式的变化。因此从切换的角度考虑v-show消耗的性能要比v-if小。v-if是惰性的在初始条件为false时v-if本身什么都不会做而使用v-show时不管初始条件是真是假DOM元素总是会被渲染。因此从初始渲染的角度考虑v-if消耗的性能要比v-show小。总体来说v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此如果需要频繁地切换则使用v-show较好如果在运行时条件很少改变则使用v-if较好。