标签：userName selected age JavaScript newInformation phone userInformation

<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>

标签：userName,selected,age,JavaScript,newInformation,phone,userInformation
来源： https://www.cnblogs.com/chenjiachengshmily/p/16341066.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。