正文
Vue 表单
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、v-model
v-model不再关心初始化的value值。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>购物车示例</title>
</head> <body>
<div id="app" v-cloak>
<input type="text" v-model="message" value="122" placeholder="请输入" />
<p>输入的文本内容是：{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
</body> </html>
效果：
2、单选
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<input type="radio" v-model="picked" value="html" id="html" />
<label for="html">HTML</label>
<br />
<input type="radio" v-model="picked" value="js" id="js" />
<label for="js">HTML</label>
<br />
<input type="radio" v-model="picked" value="css" id="css" />
<label for="css">HTML</label>
<br />
<p>选择项为：{{picked}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
picked: 'js'
}
})
</script>
</body> </html>
3、复选框
（1）单独使用时
v-model绑定布尔值
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<input type="checkbox" v-model="checked"/>js
<p>选择项为：{{checked}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
checked: false
}
})
</script>
</body> </html>
（2）组合使用
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html" />html
<lable for='html'>html</lable>
<br />
<input type="checkbox" v-model="checked" value="js" id="js" />js
<lable for='js'>js</lable>
<br />
<input type="checkbox" v-model="checked" value="css" id="css" />css
<lable for='css'>css</lable>
<br />
<p>选择项为：{{checked}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
checked: []
}
})
</script>
</body> </html>
4、下拉列表
（1）单选下拉列表
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<select v-model="selected">
<option value="0">html</option>
<option value="1">js</option>
<option value="2">css</option>
</select>
<br />
<p>选择项为：{{selected}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
selected: 0
}
})
</script>
</body> </html>
（2）多选下拉列表
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<select v-model="selected" multiple="multiple">
<option value="0">html</option>
<option value="1">js</option>
<option value="2">css</option>
</select>
<br />
<p>选择项为：{{selected}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
selected: []
}
})
</script>
</body> </html>
5、修饰符
（1）lazy
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<!--在change中同步-->
<input type="text" v-model.lazy="message" />
<br />
<p>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: '', }
})
</script>
</body> </html>
（2）number
输入转为number类型
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<!--在change中同步-->
<input type="number" v-model.number="message" />
<br />
<p>{{ typeof message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: 123, }
})
</script>
</body> </html>
（3）trim
去掉输入框的首尾空格
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<!--在change中同步-->
<input type="text" v-model.trim="message" />
<br />
<p>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: ' 5555 66 ', }
})
</script>
</body> </html>
