一个项目学习Vue3---if、else、show、for的使用

观察下面代码学习这部分内容

<!--条件和列表渲染-->
<template><button @click="stateChang">状态切换{{ flag }}</button><span v-if="flag">显示这个</span><span v-else-if="!flag">显示那个Else</span><span v-else>显示那个</span><span v-show="flag">也显示了这个</span><li v-for="item in items">{{ item.message }}</li></template>
<script lang="ts" setup>
import { computed, nextTick } from 'vue'
import { ref } from 'vue'
import { reactive } from 'vue'const flag = ref(true)function stateChang() {flag.value = !flag.value
}const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>
<style scoped>
</style>

在Vue 3中，条件渲染和列表渲染是构建动态和响应式用户界面的关键技术。通过Vue的指令和响应式数据，我们可以轻松地根据状态改变显示不同的内容，以及迭代展示列表数据。

条件渲染：v-if、v-else-if、v-else

条件渲染允许我们基于表达式的值来切换元素的显示或隐藏。Vue 3提供了几个指令来实现条件渲染：

v-if：根据表达式的真假来决定是否渲染元素。
v-else-if：在v-if之后使用，用于添加额外的条件。
v-else：用于表示前面的条件均不满足时应渲染的内容。

<template><button @click="stateChange">状态切换 {{ flag }}</button><div v-if="flag">显示这个</div><div v-else-if="!flag">显示那个Else</div><div v-else>显示那个</div>
</template><script setup>
import { ref } from 'vue'const flag = ref(true)function stateChange() {flag.value = !flag.value
}
</script>

在这个例子中，点击按钮会触发stateChange方法，从而改变flag的值，决定显示不同的<div>元素。

条件显示：v-show

与v-if不同的是，v-show是基于表达式的真假来切换元素的 CSS display 属性。如果需要频繁切换元素的可见性，v-show会比v-if效率更高。

<template><button @click="toggleVisibility">切换可见性</button><div v-show="isVisible">也显示了这个</div>
</template><script setup>
import { ref } from 'vue'const isVisible = ref(true)function toggleVisibility() {isVisible.value = !isVisible.value
}
</script>

列表渲染：v-for

Vue 3中的列表渲染通过v-for指令实现，用于渲染数组或对象的每个元素。

<template><ul><li v-for="item in items" :key="item.id">{{ item.message }}</li></ul>
</template><script setup>
import { ref } from 'vue'const items = ref([{ id: 1, message: 'Foo' },{ id: 2, message: 'Bar' }
])
</script>

在这个示例中，v-for循环遍历items数组，并为每个数组项渲染一个<li>元素，其中:key指定了每个项的唯一标识符。