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

news2024/11/16 7:47:12

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

<!--条件和列表渲染-->
<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指定了每个项的唯一标识符。