问题一
题目描述
请编写一个 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>