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>
