效果预览图
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>作业</title><style>*{margin: 0;padding: 0;}table{width: 400px;border-collapse: collapse;text-align: center;}tr{height: 40px;}th{background: #ccc;}table button{display: block;background: rgb(245, 83, 83);border: none;width: 50px;height: 30px;margin: 0 auto;border-radius: 4px;}</style>
</head>
<body><div id="app"><table border="1"><tr><th>序号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr v-for="(item,index) in arr"><td>{{index}}</td><td>{{arr[index].name}}</td><td>{{arr[index].sex}}</td><td><button @click="sc(index)">删除</button></td></tr></table><label for="">姓名:<input type="text" v-model="val"></label><label>性别</label><label><input type="radio" name="sex" v-model="sex" value="男">男</label><label><input type="radio" name="sex" v-model="sex" value="女">女</label><button @click="add">添加</button></div>
</body>
</html>
<script type="module">import {createApp} from './js/vue.esm-browser.js';createApp({data() {return {arr:[{name:'张居正',sex:'男'},{name:'海瑞',sex:'男'},{name:'朱熹',sex:'男'},{name:'王阳明',sex:'男'},],val:'',sex:'男'}},methods: {showSex(){alert(this.sex)},add(){if (this.val=='') {alert('姓名不能为空')}else if(this.val!=''){let obj ={name:this.val,sex:this.sex}this.arr.push(obj)this.val=''}},sc(index){alert('确认要删除吗')this.arr.splice(index,1)}},
}).mount('#app')
</script>
