VUE3与Uniapp 五 (v-if、v-show和template、v-for的使用)

xml 复制代码
<template>
	<!-- v-if如果是false,则不会出现在DOM中,不会被渲染;
	v-show如果为false,则会出现在DOM中,并加载资源(如图片),只是CSS隐藏了。 -->
	<view v-if="day===1">星期1</view>
	<view v-else-if="day===2">星期2</view>
	<view v-else-if="day===3">星期3</view>
	<view v-else-if="day===4">星期4</view>
	<view v-else-if="day===5">星期5</view>
	<view v-else-if="day===6">星期6</view>
	<view v-else-if="day===7">星期7</view>
	<view v-else>日期正确</view>
	
	<!-- template配合v-if使用,template并不会被加载到DOM中
	如果template换成view,则<view>123</view>被view包裹,级别降低。
	但,使用template,<view>123</view>不会被包裹,template没被加载到DOM中 -->
	<template v-if="true">
		<view>123</view>
	</template>
	
	<template v-else>
		<view>456</view>
	</template>

	<!-- v-for和v-if不能在同一个标签中
	<view v-for="item in phones " v-if="true">
		<text>{{item}}</text>
	</view> -->
	
	<!-- 同时使用v-for和v-if时,把其分别写在不同标签内 -->
	<!-- 在v-for中,养成写key的好习惯,否则增删改列表时会出错,小程序中也会出现报错 -->
	<template v-for="(item, index) in phones" :key="item.id">
		<view v-if="true">
			<text>{{item.name}}</text>
		<view>
	</template>
</template>

<script setup>
	import {ref} from "vue";
	
	let day = ref(1);

	let phones = ref([
		{id:11, name:"小米"}
		{id:11, name:"华为"}
		{id:11, name:"苹果"}
		{id:11, name:"荣耀"}
	]);
</script>

<style lang="scss">

</style>
相关推荐
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ1 小时前
html+css+js实现step进度条效果
javascript·css·html
程序员大金2 小时前
基于SpringBoot+Vue+MySQL的装修公司管理系统
vue.js·spring boot·mysql
john_hjy2 小时前
11. 异步编程
运维·服务器·javascript
风清扬_jd2 小时前
Chromium 中JavaScript Fetch API接口c++代码实现(二)
javascript·c++·chrome
yanlele2 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
It'sMyGo2 小时前
Javascript数组研究09_Array.prototype[Symbol.unscopables]
开发语言·javascript·原型模式
xgq3 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
李是啥也不会3 小时前
数组的概念
javascript