问题一

题目描述

请编写一个 Vue 组件，实现一个计数器。初始值为 0，每点击一次按钮，计数器的值增加 1，并且将计数器的值显示在页面上。

示例

<template><div><p>计数器的值：{{ count }}</p><button @click="increment">增加</button></div>
</template><script>
export default {data() {return {count: 0};},methods: {increment() {this.count++;}}
};
</script>

问题二

题目描述

请编写一个 Vue 组件，实现一个简单的待办事项列表。用户可以输入待办事项的标题，点击按钮后，待办事项会被添加到列表中，并且列表中的每个待办事项都有一个删除按钮，点击删除按钮可以将该待办事项从列表中删除。

示例

<template><div><input type="text" v-model="newTodo"><button @click="addTodo">添加</button><ul><li v-for="(todo, index) in todos" :key="index">{{ todo }}<button @click="deleteTodo(index)">删除</button></li></ul></div>
</template><script>
export default {data() {return {newTodo: '',todos: []};},methods: {addTodo() {if (this.newTodo) {this.todos.push(this.newTodo);this.newTodo = '';}},deleteTodo(index) {this.todos.splice(index, 1);}}
};
</script>

问题三

题目描述

请编写一个 Vue 组件，实现一个简单的计算器。计算器具有两个输入框和四个按钮，分别对应加法、减法、乘法和除法。用户在输入框中输入两个数字，点击不同的按钮可以执行相应的运算，并将结果显示在页面上。

示例

<template><div><input type="number" v-model="num1"><input type="number" v-model="num2"><button @click="add">+</button><button @click="subtract">-</button><button @click="multiply">*</button><button @click="divide">/</button><p>结果：{{ result }}</p></div>
</template><script>
export default {data() {return {num1: 0,num2: 0,result: 0};},methods: {add() {this.result = this.num1 + this.num2;},subtract() {this.result = this.num1 - this.num2;},multiply() {this.result = this.num1 * this.num2;},divide() {this.result = this.num1 / this.num2;}}
};
</script>

问题四

题目描述

请编写一个 Vue 组件，实现一个简单的倒计时器。用户可以输入倒计时的时间（单位为秒），点击开始按钮后，倒计时开始，页面上显示剩余时间，当倒计时结束时，页面上显示倒计时结束的提示。

示例

<template><div><input type="number" v-model="seconds"><button @click="start">开始</button><p v-if="counting">剩余时间：{{ remainingTime }} 秒</p><p v-else>倒计时结束！</p></div>
</template><script>
export default {data() {return {seconds: 0,counting: false,remainingTime: 0};},methods: {start() {this.counting = true;this.remainingTime = this.seconds;const timer = setInterval(() => {this.remainingTime--;if (this.remainingTime === 0) {clearInterval(timer);this.counting = false;}}, 1000);}}
};
</script>

问题五

题目描述

请编写一个 Vue 组件，实现一个简单的图片轮播器。组件接收一个图片数组作为参数，然后循环播放这些图片。用户可以点击按钮切换到下一张或上一张图片。

示例

<template><div><button @click="previous">上一张</button><img :src="currentImage" alt="轮播图"><button @click="next">下一张</button></div>
</template><script>
export default {props: {images: {type: Array,required: true}},data() {return {currentIndex: 0};},computed: {currentImage() {return this.images[this.currentIndex];}},methods: {previous() {this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;},next() {this.currentIndex = (this.currentIndex + 1) % this.images.length;}}
};
</script>