Vue 练习题(15 题)

<script setup>
import { ref, computed } from 'vue'
const text = ref('hello')
// computed 自动追踪 text 的变化,只读
const reversed = computed(() => text.value.split('').reverse().join(''))
</script>

<template>
  <input v-model="text" />
  <p>翻转结果:{{ reversed }}</p>
  <!-- 输入 hello 时 显示: olleh -->
</template>

<script setup>
import { ref, computed } from 'vue'
const n = ref(7)
// 素数判断:< 2 直接否;只需检查到 sqrt(n)
const isPrime = computed(() => {
  const x = n.value
  if (x < 2) return false
  for (let i = 2; i * i <= x; i++) {
    if (x % i === 0) return false
  }
  return true
})
</script>

<template>
  <input type="number" v-model.number="n" />
  <!-- v-text 把表达式结果作为文本写入 -->
  <p v-text="n + ' 是素数吗?' + (isPrime ? '是' : '否')"></p>
  <!-- 显示: 7 是素数吗?是 -->
</template>

<script setup>
import { computed } from 'vue'
// 生成 1-15 的列表项,每项带 n 和 label
const items = computed(() =>
  Array.from({ length: 15 }, (_, i) => i + 1).map((n) => ({
    n,
    label:
      n % 15 === 0 ? 'FizzBuzz'
      : n % 3 === 0 ? 'Fizz'
      : n % 5 === 0 ? 'Buzz'
      : String(n),
  }))
)
// 根据标签返回不同 class
function cls(label) {
  if (label === 'FizzBuzz') return 'fb'
  if (label === 'Fizz') return 'fz'
  if (label === 'Buzz') return 'bz'
  return ''
}
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.n" :class="cls(item.label)">
      {{ item.n }}: {{ item.label }}
    </li>
  </ul>
</template>

<style scoped>
.fz { color: orange; }
.bz { color: teal; }
.fb { color: red; font-weight: bold; }
</style>

<script setup>
import { ref, computed } from 'vue'
const nums = ref([3, 1, 4, 1, 5, 9, 2, 6])
// reduce 一行求最大,-Infinity 兜底空数组
const max = computed(() => nums.value.reduce((a, b) => (a > b ? a : b), -Infinity))
</script>

<template>
  <p>数组:{{ nums.join(', ') }}</p>
  <p>最大值:{{ max }}</p>
  <!-- 显示: 数组: 3, 1, 4, 1, 5, 9, 2, 6 / 最大值: 9 -->
</template>

<script setup>
import { ref, computed } from 'vue'
const nums = ref([10, 20, 30, 40])
// reduce 累加;再派生平均值
const sum = computed(() => nums.value.reduce((a, b) => a + b, 0))
const avg = computed(() => (nums.value.length ? sum.value / nums.value.length : 0))
</script>

<template>
  <p>数组:{{ nums.join(', ') }}</p>
  <p>总和:{{ sum }} / 平均:{{ avg }}</p>
  <!-- 显示: 总和: 100 / 平均: 25 -->
</template>

<script setup>
import { ref } from 'vue'
const n = ref(5)
const result = ref(null)
// 阶乘:从 2 累乘到 n
function factorial() {
  let r = 1
  for (let i = 2; i <= n.value; i++) r *= i
  result.value = r
}
</script>

<template>
  <input type="number" v-model.number="n" />
  <button @click="factorial">计算 n!</button>
  <p v-if="result !== null">{{ n }}! = {{ result }}</p>
  <!-- 点击后 显示: 5! = 120 -->
</template>

<!-- UserCard.vue 子组件 -->
<script setup>
// defineProps 声明接收的属性
defineProps({
  name: { type: String, required: true },
  age: { type: Number, default: 0 },
})
</script>

<template>
  <div class="card">
    <h4>姓名:{{ name }}</h4>
    <p>年龄:{{ age }}</p>
  </div>
</template>

<!-- 父组件用法 -->
<!--
<script setup>
import UserCard from './UserCard.vue'
</script>
<template>
  <UserCard name="小明" :age="18" />
</template>
-->
<!-- 渲染:一张卡片,显示"姓名:小明 / 年龄:18" -->

<!-- CounterButton.vue 子组件 -->
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({ count: Number })
// 声明要触发的事件
const emit = defineEmits(['change'])
function add() { emit('change', props.count + 1) }
function sub() { emit('change', props.count - 1) }
</script>

<template>
  <button @click="sub">-</button>
  <span>{{ count }}</span>
  <button @click="add">+</button>
</template>

<!-- 父组件用法 -->
<!--
<script setup>
import { ref } from 'vue'
import CounterButton from './CounterButton.vue'
const total = ref(0)
</script>
<template>
  <CounterButton :count="total" @change="total = $event" />
</template>
-->
<!-- 渲染:可增减的计数器 [ - ] 0 [ + ] -->

<!-- CardLayout.vue 子组件 -->
<template>
  <section class="card">
    <header><slot name="title">默认标题</slot></header>
    <main><slot>默认内容</slot></main>
    <footer><slot name="footer" /></footer>
  </section>
</template>

<!-- 父组件用法:用 #name 简写分发内容到具名插槽 -->
<!--
<script setup>
import CardLayout from './CardLayout.vue'
</script>
<template>
  <CardLayout>
    <template #title>我的文章</template>
    <p>正文内容...</p>
    <template #footer>2026 © me</template>
  </CardLayout>
</template>
-->
<!-- 渲染:三栏卡片,标题/正文/页脚分别由父级填充 -->

<!-- CustomInput.vue -->
<script setup>
// v-model 默认绑定 modelValue 属性 + update:modelValue 事件
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- 父组件用法 -->
<!--
<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'
const text = ref('hi')
</script>
<template>
  <CustomInput v-model="text" />
  <p>{{ text }}</p>
</template>
-->
<!-- 输入框内容与父级 text 双向同步 -->

<!-- composables/useCounter.js -->
<!-- 把 ref 状态和方法封装到一个函数里,可在任意组件复用 -->
<script setup>
// useCounter.js 文件实际内容(纯 JS,不是 SFC):
/*
import { ref, computed } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const double = computed(() => count.value * 2)
  function inc() { count.value++ }
  function dec() { count.value-- }
  function reset() { count.value = initial }
  return { count, double, inc, dec, reset }
}
*/

// App.vue 用法:
import { useCounter } from './composables/useCounter'
const { count, double, inc, dec, reset } = useCounter(10)
</script>

<template>
  <button @click="dec">-</button>
  <span>{{ count }} (×2 = {{ double }})</span>
  <button @click="inc">+</button>
  <button @click="reset">重置</button>
</template>
<!-- 渲染:计数 10,双倍 20,可增减可重置 -->

<script setup>
import { reactive, ref } from 'vue'
// reactive 适合管理对象/数组状态
const todos = reactive([])
const newTodo = ref('')
function add() {
  const text = newTodo.value.trim()
  if (!text) return
  todos.push({ id: Date.now(), text, done: false })
  newTodo.value = ''
}
function remove(id) {
  const i = todos.findIndex((t) => t.id === id)
  if (i !== -1) todos.splice(i, 1)
}
</script>

<template>
  <input v-model="newTodo" @keyup.enter="add" placeholder="回车添加" />
  <button @click="add">添加</button>
  <ul>
    <li v-for="t in todos" :key="t.id">
      <input type="checkbox" v-model="t.done" />
      <!-- 对象语法 :class 绑定 done 类 -->
      <span :class="{ done: t.done }">{{ t.text }}</span>
      <button @click="remove(t.id)">删除</button>
    </li>
  </ul>
</template>

<style scoped>
.done { text-decoration: line-through; color: #999; }
</style>
<!-- 渲染:可输入、回车添加、勾选完成、删除的 Todo 列表 -->

<!-- composables/useCounter.js — 进阶版:localStorage 持久化 + 可选步长 -->
<script setup>
// useCounter.js 文件实际内容:
/*
import { ref, watch } from 'vue'

export function useCounter(key, initial = 0, step = 1) {
  // 从 localStorage 读,失败兜底到 initial
  const stored = Number(localStorage.getItem(key))
  const count = ref(Number.isNaN(stored) ? initial : stored)
  // watch 自动同步到 localStorage
  watch(count, (v) => localStorage.setItem(key, String(v)))
  const inc = () => (count.value += step)
  const dec = () => (count.value -= step)
  const reset = () => (count.value = initial)
  return { count, inc, dec, reset }
}
*/

// App.vue — 同一组件复用两次,各自独立、刷新不丢
import { useCounter } from './composables/useCounter'
const { count: a, inc: incA } = useCounter('a', 0, 1)
const { count: b, inc: incB } = useCounter('b', 100, 10)
</script>

<template>
  <p>A: {{ a }} <button @click="incA">+1</button></p>
  <p>B: {{ b }} <button @click="incB">+10</button></p>
</template>
<!-- 渲染:两个独立计数器,刷新后值保持 -->

<!-- LoginForm.vue -->
<script setup>
import { ref } from 'vue'
const email = ref('')
const pwd = ref('')
const error = ref('')
const emit = defineEmits(['submit'])
// 简单校验:非空 + 邮箱含 @ + 密码长度
function validate() {
  if (!email.value || !pwd.value) return '邮箱和密码必填'
  if (!email.value.includes('@')) return '邮箱格式不正确'
  if (pwd.value.length < 6) return '密码至少 6 位'
  return ''
}
function submit() {
  const msg = validate()
  if (msg) { error.value = msg; return }
  error.value = ''
  emit('submit', { email: email.value, pwd: pwd.value })
}
</script>

<template>
  <form @submit.prevent="submit">
    <input v-model="email" placeholder="邮箱" />
    <input v-model="pwd" type="password" placeholder="密码" />
    <p v-if="error" class="err">{{ error }}</p>
    <button type="submit">登录</button>
  </form>
</template>

<style scoped>
.err { color: red; margin: 4px 0; }
</style>

<!-- 父组件:监听 submit 拿到表单数据 -->
<!--
<script setup>
import LoginForm from './LoginForm.vue'
function onSubmit(data) { console.log('收到', data) }
</script>
<template>
  <LoginForm @submit="onSubmit" />
</template>
-->
<!-- 渲染:带校验的登录表单,出错显示红字提示 -->

<!-- ProductList.vue 子组件 -->
<script setup>
defineProps(['products'])
defineEmits(['add'])
</script>
<template>
  <ul>
    <li v-for="p in products" :key="p.id">
      {{ p.name }} - ¥{{ p.price }}
      <button @click="$emit('add', p)">加入购物车</button>
    </li>
  </ul>
</template>

<!-- Cart.vue 子组件 -->
<script setup>
defineProps(['items'])
defineEmits(['clear'])
</script>
<template>
  <div>
    <h4>购物车 ({{ items.length }})</h4>
    <ul><li v-for="(it, i) in items" :key="i">{{ it.name }} ¥{{ it.price }}</li></ul>
    <p>合计:¥{{ items.reduce((s, it) => s + it.price, 0) }}</p>
    <button @click="$emit('clear')">清空</button>
  </div>
</template>

<!-- App.vue 父组件 -->
<!--
<script setup>
import { ref } from 'vue'
import ProductList from './ProductList.vue'
import Cart from './Cart.vue'
const products = [
  { id: 1, name: '苹果', price: 5 },
  { id: 2, name: '香蕉', price: 3 },
]
const cart = ref([])
function add(p) { cart.value.push(p) }
</script>
<template>
  <ProductList :products="products" @add="add" />
  <Cart :items="cart" @clear="cart = []" />
</template>
-->
<!-- 渲染:商品可加购,购物车显示数量与合计,可清空 -->