JavaScript

<script>

const app = Vue.createApp({
data() {
return {
userInformation: [
{ userName: ‘用户1’, selected: ‘男’, age: ’18’, phone: ‘12345678911’},
{ userName: ‘用户2’, selected: ‘女’, age: ’19’, phone: ‘12345678912’},
{ userName: ‘用户3’, selected: ‘男’, age: ’20’, phone: ‘12345678913’},
],
newInformation:{
userName:”,
selected:’男’,
age:”,
phone:”
}
}
},
methods: {
// 创建新用户
createUser() {
// 1、添加用户信息判空
const { userName,selected,age,phone } = this.newInformation
if(!userName || !selected || !age || !phone) {
alert(‘输入信息不能为空’)
// 不执行后面代码
return
}
// 2、添加新用户
this.userInformation.unshift(this.newInformation)
// 3、清空输入框信息 保证添加完用户信息双向绑定的数据修改，下方表格数据不会随着修改
this.newInformation = {}

},
//删除功能
remove(index) {
// splice() 数组的删除方法 第一个参数是删除的位置 第二个参数是删除的个数
// 这边remove方法传值的index指的就是 userInformation 数组里面的索引值
this.userInformation.splice(index,1)
}
},
computed: {

}
}).mount(‘#app’);

</script>