初级 Vue 算法题。

题目描述

请编写一个 Vue 组件，实现一个简单的表单验证器。表单中有一个输入框和一个提交按钮。当用户点击提交按钮时，如果输入框为空，则显示错误提示信息；否则，显示成功提交的提示信息。

示例

<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="submitForm">提交</button>
    <p v-if="showError" style="color: red;">请输入内容</p>
    <p v-if="showSuccess" style="color: green;">提交成功</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showError: false,
      showSuccess: false
    };
  },
  methods: {
    submitForm() {
      if (this.inputValue === '') {
        this.showError = true;
        this.showSuccess = false;
      } else {
        this.showError = false;
        this.showSuccess = true;
      }
    }
  }
};
</script>

题目描述

请编写一个 Vue 组件，实现一个简单的列表过滤器。组件接收一个字符串数组和一个过滤关键字作为参数，然后根据过滤关键字对字符串数组进行过滤，并显示过滤结果。

示例

<template>
  <div>
    <input type="text" v-model="filterKeyword">
    <ul>
      <li v-for="item in filteredList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      filterKeyword: ''
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.includes(this.filterKeyword));
    }
  }
};
</script>