Vue基础篇-表单与v-model
第六章
6.1 基本用法
表单控件在实际业务中比较常见,比如单选,多选,下拉列表,输入框等
用它们可以完成数据的录入,校验,提交等。
vue提供了v-model指令,用于在表单类元素上的双向绑定数据。
简单的一个双向绑定的示例:输入框的值改变
data中的数据也就会改变,相应的视图也就会更新。
<body>
<div id="app" v-cloak>
<input type="text" v-model="something">
<p>{{something}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data(){
return {
something:''
}
},
computed:{
},
methods:{
}
})
</script>
</body>
使用v-model时,如果使用中英文输入法,当敲下汉字时才会触发更新。
如果希望总是实时更新,可以用@input来代替v-model。
<body>
<div id="app" v-cloak>
<input type="text" @input="handle">
<p>{{something}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
something: ''
}
},
computed: {
},
methods: {
handle(e) {
this.something = e.target.value
}
}
})
</script>
</body>
6.2 绑定值
有时候v-model会绑定一个动态的数据,这时可以使用v-bind。
当选中时 app.picked=app.value
<body>
<div id="app" v-cloak>
<input type="radio" v-model="picked" :value='value'>
<label for="">单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
picked: false,
value: 123
}
},
computed: {
},
methods: {
}
})
</script>
</body>
6.3 修饰符
与事件修饰符类似,v-model也有修饰符,用于控制数据同步的时机。
6.3.1 .lazy
使用修饰符,.lazy会转变为在change事件中同步。
数据不会实时改变,而是在失焦或者按回车时才更新。
<body>
<div id="app" v-cloak>
<input type="text" v-model.lazy="message">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
message:''
}
},
computed: {
},
methods: {
}
})
</script>
</body>
6.3.2 .number
.number可以将输入的类型转换为Number类型
虽然输入的是数字,但是其实是String类型
在输入框时会比较有用。
<div id="app" v-cloak>
<input type="text" v-model="message">
<p>{{message}}</p>
<p>{{typeof message}}</p>
</div>
....................................................
<div id="app" v-cloak>
<input type="text" v-model.number="message">
<p>{{message}}</p>
<p>{{typeof message}}</p>
</div>
6.3.3 .trim
.trim可以过滤输入的首位空格
<div id="app" v-cloak>
<input type="text" v-model.trim="message">
<p>{{message}}</p>
<p>{{typeof message}}</p>
</div>