五个初级 Vue 算法题。

问题一

题目描述

请编写一个 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>
相关推荐
知识分享小能手23 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one24 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲25 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
~|Bernard|2 小时前
在 PyCharm 里怎么“点鼠标”完成指令同样的运行操作
算法·conda
战术摸鱼大师2 小时前
电机控制(四)-级联PID控制器与参数整定(MATLAB&Simulink)
算法·matlab·运动控制·电机控制
Christo32 小时前
TFS-2018《On the convergence of the sparse possibilistic c-means algorithm》
人工智能·算法·机器学习·数据挖掘
weixin_437830942 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
好家伙VCC3 小时前
数学建模模型 全网最全 数学建模常见算法汇总 含代码分析讲解
大数据·嵌入式硬件·算法·数学建模
前端工作日常3 小时前
我学习到的Vue2.6的prop修饰符
vue.js