v-model和表单元素大集合及修饰符的使用
2020-09-29 本文已影响0人
似朝朝我心
1.input框
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script>
const app = new Vue({
el: '#app',
data () {
return {
message: 'hello world'
}
}
})
</script>
</body>
h5写法：2.单选框radio
Vue写法：
<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>
const app = new Vue({
el: '#app',
data() {
return {
sex: '男' //让他默认选择
}
}
})
</script>
</body>
3.勾选框checkbox
单选框情景
<body>
<div id="app">
<label for="">
<!-- label的好处是让用户不局限于勾选框里面的鼠标点击范围，
用户还可以点击文字进行勾选 -->
<input type="checkbox" id="agree" v-model="isAgree">同意
<h2>你选择的是 {{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
</label>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
isAgree: false
}
}
})
</script>
</body>
多选框场景：
<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">排球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>你选择的爱好是：{{hobbies}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
hobbies:[]
}
}
})
</script>
</body>
虽然效果可以实现，但我们用vue框架不能把数据写死，我们看到h5写法input的value="篮球"这种形式是写死的，vue官方提供了input框的值绑定:value，由数据动态决定。
<body>
<div id="app">
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">
{{item}}
</label>
<h2>你选择的爱好是：{{hobbies}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
hobbies: [],
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫求']
}
}
})
</script>
</body>
下拉菜单select
单个下拉菜单场景
<body>
<div id="app">
<select name="abc" v-model="fruit">
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
<option value="石榴">石榴</option>
</select>
<h2>你选择的水果是: {{fruit}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
fruit: '石榴' //默认选择
}
}
})
</script>
</body>
下拉菜单多个选择的场景
<body>
<div id="app">
<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>
const app = new Vue({
el: '#app',
data() {
return {
fruits: []
}
}
})
</script>
</body>
（按住ctrl键可以选择多个，否则只会选一个）
总结：v-model绑定的数据有字符串类型，布尔值类型，数组型
v-model的修饰符
（1）v-model.lazy 懒加载,失去焦点，去除双向数据绑定当中的实时监控模式，应用场景：只需监听用户敲下回车的那一刻，而不是监听用户在Input框输入了什么内容。
<body>
<div id="app">
<input type="text" v-model.lazy="msg">
<h2>{{msg}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
msg: '你好'
}
}
})
</script>
</body>
（2）v-model.number修饰符，只允许input框输入数字类型，输入其他字母无效。
<body>
<div id="app">
<input type="number" v-model.number="count">
<h2>{{count}}--判断类型：{{typeof count}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
count: 0
}
}
})
</script>
</body>
（3）v-model.trim,剥除两边的空格
<body>
<div id="app">
<input type="text" v-model.trim="name">
<h2>你的名字是：{{name}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
name: ''
}
}
})
</script>
</body>
无论我们在两边输入多少个空格，都会被过滤掉
下面是没绑定修饰符之前的效果，页面虽然看不出来，但数据是变化了的。
