题目描述

请编写一个 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>