- 技术
- vue之表单的相关操作
以下内容可自行c,v到编辑器打开(vue文件请在官网下载)
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<script src
="./vue.js"></script
>
</head
>
<body
>
<!-- 注
:表单只能用v
-model
-->
<div id
="app">
<div v
-text
="a"></div
>
<hr
>
<!-- 普通输入框
-->
<div
>
<input type
="text" v
-model
="a">
</div
>
<hr
>
<!-- 单选按钮两个的v
-model绑定值要相同
,当其绑定的值和其中一个的value相同时
,默认选中这一项
-->
<div
>
<input type
="radio" id
="male" value
="1" v
-model
="dender">
<label
for="male">男
</label
>
<input type
="radio" id
="female" value
="2" v
-model
="dender">
<label
for="female">女
</label
>
</div
>
<hr
>
<!-- 复选框v
-model绑定值要相同
,当其绑定的值和其中一个的value相同时
,默认选中这一项
-->
<div
>
<input type
="checkbox" id
="ball" value
="1" v
-model
="hobby">
<label
for="ball">篮球
</label
>
<input type
="checkbox" id
="sing" value
="2" v
-model
="hobby">
<label
for="sing">唱歌
</label
>
<input type
="checkbox" id
="code" value
="3" v
-model
="hobby">
<label
for="code">代码
</label
>
</div
>
<hr
>
<!-- 下拉框v
-model绑定给父级元素
,当其绑定的值和其中一个的value相同时
,默认选中这一项
-->
<div
>
<select v
-model
="zhiye">
<option value
="0">请选择职业
</option
>
<option value
="1">老师
</option
>
<option value
="2">公务员
</option
>
<option value
="3">码农
</option
>
</select
>
</div
>
<hr
>
<!-- 文本域
-->
<div
>
<textarea v
-model
="a"></textarea
>
</div
>
<!-- 表单修饰符 number转数字
,trim去除两头的空格
,lazy
.将input事件转为change事件
-->
<input type
="text" v
-model
.trim
="age">
</div
>
<script type
="text/javascript">
var vm
= new Vue({
el
: '#app',
data
: {
a
: 123,
dender
: 2,
hobby
: ['2', '3'],
zhiye
: 2,
a
: 12255,
age
: 122
},
methods
: {
}
})
</script
>
</body
>
</html
>
错误之处还望不吝赐教
Processed:
0.014, SQL:
9
