Vue罕用个性
- 表单操作
- 自定义指令
- 计算属性
- 侦听器
- 过滤器
- 申明周期
Vue之表单操作
- 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>
发表回复