<vue 基础知识 9、v-model使用 input、radio、checkbox、select、修饰符>
代码结构
一、 01-v-model的基本使用
Vue中使用v-model指令来实现表单元素和数据的双向绑定
1、效果
2、代码
01-v-model的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" >
<input type="password" v-model="pwd" >
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好',
pwd:''
}
})
</script>
</body>
</html>
二、 02-v-model结合radio类型
1、 效果
2、代码
02-v-model结合radio类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>选择的性别是: {{sex}}</h2>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
sex: '女'
}
})
</script>
</body>
</html>
三、03-v-model结合checkbox类型
1、效果
2、代码
03-v-model结合checkbox类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>爱好是: {{hobbies}}</h2>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
hobbies: []
}
})
</script>
</body>
</html>
四、04-v-model结合select类型
1、效果
注：下面的多选框需要按住ctrl多选
2、代码
04-v-model结合select类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.选择一个-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruit}}</h2>
<!--2.选择多个-->
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruits}}</h2>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
fruit: '香蕉',
fruits: []
}
})
</script>
</body>
</html>
五、05-v-model修饰符的使用
1、效果
注：（1）当上面输入时只有光标离开输入框，下面的值才会改变。
（2）只能输入数字
（3）输入的内容去掉前后的空格
2、代码
05-v-model修饰符的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.修饰符: lazy-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!--2.修饰符: number-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>
<!--3.修饰符: trim-->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}</h2>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: ''
}
})
</script>
</body>
</html>
资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
