vue.js简单添加和删除-优快云博客

本文介绍了一个使用Vue.js实现的简单用户信息管理页面，包括添加和删除用户信息的功能。页面提供了输入姓名、年龄及选择爱好的表单，并通过表格形式展示了已添加的用户信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这只是个简单的添加和删除，没有连接后台数据的

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="app" style="width:500px">
        <fieldset>
            <legend>添加用户信息</legend>
            <div class="form-groud" >
                <label>姓名：</label>
                <input type="text" v-model="newPerson.name"/>
            </div>
            <div class="form-groud">
                <label>年龄：</label>
                <input type="text" v-model="newPerson.age"/>
            </div>
            <div class="form-groud">
                <label>爱好：</label>
                <select v-model="newPerson.hobby">
                    <option value="体育">体育</option>
                    <option value="阅读">阅读</option>
                    <option value="旅游">旅游</option>
                </select>
            </div>
            <div class="from-groud">
                <label></label>
                <button @click="createPerson">添加</button>
            </div>
        </fieldset>
        
        <table width="500px" border="1px">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>爱好</td>
                <td>操作</td>
            </tr>
            <tr v-for="person in people">
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td>{{person.hobby}}</td>
                <td :class="'text-center'"><button @click="deletePerson($index)">删除</button></td>
            </tr>
        </table>
        
        
        
    </div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js "></script>
<script>
    var wm = new Vue({
        el:'#app',
        data:{
            newPerson:{
                name:'',
                age:'',
                hobby:''
            },
            people:[{
                name:'Lucy',
                age:20,
                hobby:'阅读'
            },
            {
                name:'张三',
                age:30,
                hobby:'体育'
            }]
        },
        methods:{
            
            createPerson: function(){
                this.people.push(this.newPerson);
                // 添加完newPerson对象后，重置newPerson对象
                this.newPerson = {name: '', age: 0, sex: 'Male'}
            },
            deletePerson:function(index){
                this.people.splice(index,1);
            }
        }
    });
</script>
</html>