- 表单操作
- 自定义指令
- 计算属性
- 侦听器
- 过滤器
- 申明周期
- input: 单行文本
- textarea：多行文本
- select: 下拉多选
- radio: 单选框
- checkbox: 多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 之表单操作 </title>
<style>
* {
margin:0;
padding: 0;
}
form {
width: 500px;
margin: 200px auto;
}
p {margin-top: 20px;}
input {margin-left: 20px;}
p textarea {vertical-align: center;}
</style>
</head>
<body>
<div id="app">
<form action="http:///www.baidu.com">
<!-- 单行文本 -->
<p> 账号：<input type="text" v-model="uname"></p>
<!-- 单选 -->
<p> 性别：<input type="radio" name="sex" v-model="sex" value="1"> 男 <input type="radio" name="sex" v-model="sex" value="2"> 女 </p>
<!-- 多选 -->
<p> 性别：<input type="checkbox" name="hobby" v-model="hobby" value="1"> 篮球 <input type="checkbox" name="hobby" v-model="hobby" value="2"> 足球 <input type="checkbox" name="hobby" v-model="hobby" value="3"> 乒乓球 </p>
<!-- 下拉菜单 -->
<p>
下拉菜单:
<select v-model="carte" multiple="true" >
<option value="1">WEB 前端 </option>
<option value="2">java</option>
<option value="3"> 大数据 </option>
<option value="4">c++</option>
<option value="5"> 经营 </option>
<option value="6"> 产品经理 </option>
</select>
</p>
<!-- 留言板 -->
<p> 留言：<textarea v-model="textbox"> </textarea></p>
<!-- 提交按钮 -->
<p> <input type="submit" value="提交" @click.prevent="handle"></p>
</form>
</div>
<script src="./vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
uname:"尧子陌",
sex:2,
hobby:['1','2','3'],
carte:['1','2'],
textbox:'留言板'
},
methods:{handle:function (){console.log(this.hobby.toString())
}
}
})
</script>
</body>
</html>