tianyunperfect
/
web-base--


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>用户信息</h1>
    <form id="userForm">
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="age">年龄:</label>
            <input type="number" class="form-control" id="age" placeholder="请输入年龄">
        </div>
        <div class="form-group">
            <label for="city">城市:</label>
            <input type="text" class="form-control" id="city" placeholder="请输入城市">
        </div>
        <button type="submit" class="btn btn-primary">发送</button>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
    const app = new Vue({
        el: '#userForm',
        methods: {
            submitForm() {
                const name = document.getElementById('name').value;
                const age = document.getElementById('age').value;
                const city = document.getElementById('city').value;
                // 将用户输入的数据发送到后台
                // 发送方式可以使用fetch或axios等库来实现
            }
        }
    });
</script>
</body>
</html>