表单提交是

首先，确保你已经安装了Vue 3、Element UI和axios（用于发送HTTP请求）。你可以使用以下命令进行安装：

bash复制代码

npm install vue@next element-ui axios --save

 

<template>  <el-form :model="form" :rules="rules" ref="form" label-width="120px">  <el-form-item label="姓名" prop="name">  <el-input v-model="form.name"></el-input>  </el-form-item>  <el-form-item label="年龄" prop="age">  <el-input v-model="form.age"></el-input>  </el-form-item>  <el-form-item label="住址" prop="address">  <el-input v-model="form.address"></el-input>  </el-form-item>  <el-form-item label="电话" prop="phone">  <el-input v-model="form.phone"></el-input>  </el-form-item>  <el-form-item>  <el-button type="primary" @click="submitForm('form')">提交</el-button>  </el-form-item>  </el-form>  </template><script>  
export default {  data() {  return {  form: {  name: '',  age: '',  address: '',  phone: ''  },  rules: {  name: [  { required: true, message: '请输入姓名', trigger: 'blur' },  { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }  ],  age: [  { required: true, message: '请输入年龄', trigger: 'blur' },  { min: 18, max: 100, message: '年龄在 18 到 100 岁之间', trigger: 'blur' }  ],  address: [  { required: true, message: '请输入住址', trigger: 'blur' },  { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }  ],  phone: [  { required: true, message: '请输入电话号码', trigger: 'blur' },  { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }  ]  },  apiUrl: 'https://example.com/api/submit' // 后端接口的URL  };  },  methods: {  submitForm(formName) {  this.$refs[formName].validate((valid) => {  if (valid) {  // 表单验证通过，提交表单数据到后端接口  axios.post(this.apiUrl, this.form)  .then((response) => {  // 后端接口返回成功处理逻辑...  console.log('提交成功');  })  .catch((error) => {  // 后端接口返回失败处理逻辑...  console.log('提交失败');  });  } else {  // 表单验证失败，显示错误信息...  console.log('表单验证失败');  return false;  }  });}
}
}</script>  

本地存储

<template><div><h1>Task List</h1><input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task" /><button @click="removeTask">Delete</button></div></template><script>export default {data() {return {newTask: '',};},methods: {removeTask(index) {console.log(this.newTask,'asadsad')this.tasks.splice(index, 1);// 更新LocalStorage中的任务列表localStorage.setItem('tasks', JSON.stringify(this.newTask));}}};</script>

 

vue本地存储_vue 本地存储-CSDN博客