学习

分数范围	页面显示内容
90 ≤ score	🎉 优秀！继续保持！
60 ≤ score < 90	🙂 及格了，加把劲！
score < 60	😢 不及格，要努力哦！

考察点	你需要实现
ref() 创建响应式变量	定义 score 来追踪分数
点击事件处理函数	用 @click 调用函数提升分数
条件渲染 v-if / v-else-if / v-else	根据 score 的值判断显示哪一段文字
模板中插值绑定	显示当前分数

分数范围	页面显示内容
90 ≤ score	🎉 优秀！继续保持！
60 ≤ score < 90	🙂 及格了，加把劲！
score < 60	😢 不及格，要努力哦！

考察点	你需要实现
ref() 创建响应式变量	定义 score 来追踪分数
点击事件处理函数	用 @click 调用函数提升分数
条件渲染 v-if / v-else-if / v-else	根据 score 的值判断显示哪一段文字
模板中插值绑定	显示当前分数

6 - Conditional Rendering · Jimmy Huang's Blog

html

<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

html

<script setup>
// TODO：1. 引入 ref 并创建响应式变量 score（初始值为 0）


// TODO：2. 编写函数 increaseScore()
// 每次加 20 分，超过 100 重置为 0

</script>

<template>
  <div class="box">
    <h2>当前分数：{{ /* TODO：显示分数 */ }}</h2>

    <!-- TODO：使用 v-if / v-else-if / v-else 显示评价内容 -->
    <!-- 条件一：分数 ≥ 90，显示 🎉 优秀！继续保持！ -->
    <!-- 条件二：60 ≤ 分数 < 90，显示 🙂 及格了，加把劲！ -->
    <!-- 条件三：分数 < 60，显示 😢 不及格，要努力哦！ -->

    <button @click="/* TODO：绑定点击事件 */">
      提升分数
    </button>
  </div>
</template>

<style scoped>
.box {
  border: 2px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
}
button {
  margin-top: 10px;
  padding: 8px 12px;
}
</style>

html

<script setup>
// TODO：1. 引入 ref 并创建响应式变量 score（初始值为 0）
import { ref } from 'vue'

const score = ref(0)

// TODO：2. 编写函数 increaseScore()
// 每次加 20 分，超过 100 重置为 0
function increaseScore() {
  score.value +=20
  if(score.value >100) {
    score.value = 0
  }
}
</script>

<template>
  <div class="box">
    <h2>当前分数：{{ score }}</h2>

    <!-- TODO：使用 v-if / v-else-if / v-else 显示评价内容 -->
    <!-- 条件一：分数 ≥ 90，显示 🎉 优秀！继续保持！ -->
    <h1 v-if="score>=90">🎉 优秀！继续保持</h1>
    <!-- 条件二：60 ≤ 分数 < 90，显示 🙂 及格了，加把劲！ -->
    <h1 v-else-if="score>=60">🙂 及格了，加把劲！</h1>
    <!-- 条件三：分数 < 60，显示 😢 不及格，要努力哦！ -->
		<h1 v-else>😢 不及格，要努力哦！</h1>
    <button @click="increaseScore">提升分数</button>
  </div>
</template>

<style scoped>
.box {
  border: 2px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
}
button {
  margin-top: 10px;
  padding: 8px 12px;
}
</style>

学习

学习

学习

6 - Conditional Rendering

使用`v-if` 指令进行有条件的渲染元素

使用`v-else` 和 `v-else-if` 表示其他的条件分支

Example 1

Example 2

本页目录

学习

6 - Conditional Rendering

使用`v-if` 指令进行有条件的渲染元素

使用`v-else` 和 `v-else-if` 表示其他的条件分支

Example 1

Example 2

本页目录

6 - Conditional Rendering

使用v-if 指令进行有条件的渲染元素

使用v-else 和 v-else-if 表示其他的条件分支

Example 1

Example 2

6 - Conditional Rendering

使用v-if 指令进行有条件的渲染元素

使用v-else 和 v-else-if 表示其他的条件分支

Example 1

Example 2

使用`v-if` 指令进行有条件的渲染元素

使用`v-else` 和 `v-else-if` 表示其他的条件分支

使用`v-if` 指令进行有条件的渲染元素

使用`v-else` 和 `v-else-if` 表示其他的条件分支