car_deal_util/code/web/car_dealer/vue/表单.html

89 lines
3.0 KiB
HTML
Raw Normal View History

2022-11-12 16:31:39 +00:00
<!--
* @Author: Kane
* @Date: 2022-11-12 23:21:53
* @LastEditors: Kane
2022-11-15 09:56:34 +00:00
* @LastEditTime: 2022-11-14 16:25:35
2022-11-12 16:31:39 +00:00
* @FilePath: \car_dealer\vue\表单.html
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
2022-11-15 09:56:34 +00:00
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单</title>
<link rel="stylesheet" href="../css/root.css" />
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/button.css" />
<link rel="stylesheet" href="../css/app.css" />
<link rel="stylesheet" href="../css/表单/表单.css" />
</head>
2022-11-12 16:31:39 +00:00
2022-11-15 09:56:34 +00:00
<body>
<div class="content">
<div id="app">
<p class="grid-left">用户名:</p>
<input
class="grid-right"
type="text"
placeholder=""
v-model="account.username"
/>
<p class="grid-left">密码:</p>
<input type="password" v-model="account.password" />
<p class="grid-left">性别:</p>
<div class="cell-gender">
<input
type="radio"
name="gender"
id="male"
value="male"
v-model="account.gender"
/><label for="male"></label>&nbsp;
<input
type="radio"
name="gender"
id="female"
value="female"
v-model="account.gender"
/><label for="female"></label>
</div>
<p class="grid-left">年龄:</p>
<input type="number" v-model.number="account.age" />
<p class="grid-left">水果:</p>
<select name="fruit" id="fruit" v-model="account.fruits">
<option disabled value="">喜欢的水果</option>
<option v-for="fruit in fruits" v-bind:value="fruit">
{{fruit}}
</option>
</select>
2022-11-12 16:31:39 +00:00
</div>
</div>
2022-11-15 09:56:34 +00:00
</body>
<script src="../js/vue/vue.global.js"></script>
<script src="../js/axios/1.1.3/axios.js"></script>
<script>
const app = {
data() {
return {
account: {
username: "",
password: "",
gender: "",
age: "",
hobbies: [],
fruits: "",
},
fruits: ["香蕉", "梨子", "苹果"],
};
},
};
2022-11-12 16:31:39 +00:00
2022-11-15 09:56:34 +00:00
const vm = Vue.createApp(app);
vm.mount("#app");
</script>
</html>