vue3.0 手写一个表单提交

最新推荐文章于 2024-06-25 15:53:03 发布

在路上等

最新推荐文章于 2024-06-25 15:53:03 发布

阅读量411

点赞数

分类专栏： vue3.0+TS 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_42327537/article/details/130288787

版权

vue3.0+TS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过这人可以了解vue3 和ts的很多属性例如：

1.vue3没有了filter属性用computed代替

2.props传参用type 接收控制数据类型

3.定义数组对象，以及使用生命周期

<script setup lang="ts">
import { ref,reactive,computed,onMounted, nextTick,onBeforeUpdate  } from 'vue'
type HeaderProps = { 
  dataToSon: object[];
  msg:string
};
interface Pro  {
	id: number,
	age: string,
  name:string,
  major:string,
  graduate:string
}

defineProps<HeaderProps>();
const count = ref(0)
let arrPro:{data:Pro[]} = reactive({data:[]})
let objPro = reactive({id:0,name:"",age:"",major:"", graduate:""})
onMounted(()=>{
  let obj:any = sessionStorage.getItem('arrPro')
  let arr  = JSON.parse(obj)
  arrPro.data?arrPro.data = arr.data:arrPro
  // if(arr.data.length){
  //   nextTick(()=>{
  //     console.log(arrPro)
  //   })
  // }
})
onBeforeUpdate(()=>{
  sessionStorage.setItem('arrPro',JSON.stringify(arrPro))
})
const setPro = ()=>{
  objPro.id = Date.now()
  arrPro.data.push(objPro)
  // sessionStorage.setItem('arrPro',JSON.stringify(arrPro))
  objPro={id:0,name:"",age:"",major:"", graduate:""}
}
const getCent = (e:any)=>{
  objPro.graduate=  e.target.value
}
const delpro = (id:number)=>{
  // arrPro = arrPro.filter(item=>item.id != id)
  arrPro.data.map((item,index)=>{
    if(item.id == id){
      arrPro.data.splice(index,1)
    }
  })
  console.log(arrPro,'arr')
  
  sessionStorage.setItem('arrPro',JSON.stringify(arrPro))
}
const formetage = computed(()=>{
  return function(age:string){
    if(age==='1'){
      return '男'
    }else{
      return '女'
    }
      }
})
</script>

<template>
  <p>{{ msg }}</p>

  <div class="card">
      姓 名: <input type="text"  v-model="objPro.name" />
      <br>
      性 别: <input type="text" v-model="objPro.age" />
      <br>
      专 业: <input type="text"  v-model="objPro.major" />
      <br>
      毕业时间: <select @change="getCent">
                  <option value="2023">2023</option>
                  <option value="2022">2022</option>
                  <option value="2021">2021</option>
                  <option value="2020">2020</option>
                  <option value="2019">2019</option>
                </select>
      <br><br>
      <button  @click="setPro" >go on</button>
    
  </div>
  <div>
    <table width="800" align="center">
			<thead>
				<tr>
					<th>姓 名</th>
					<th>性 别</th>
					<th>专 业</th>
					<th>毕业时间</th>
          <th>操 作</th>
				</tr>
			</thead>
			<tbody v-if="arrPro.data.length">
        <tr v-for="(item,index) in arrPro.data" :key="index">
          <td>{{item.name}}</td>
          <td>{{formetage(item.age)}}</td>
          <td>{{item.major}}</td>
          <td>{{item.graduate}}</td>
          <td @click="delpro(item.id)"><span class="del">删除</span></td>
        </tr>
			</tbody>
		</table>
  </div>
</template>

<style scoped>
@import './index.css';
.read-the-docs {
  color: #888;
}
input{
  margin: 10px 5px;
  height: 20px;
}
</style>