v-model
指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但是 Vue 是单项数据流,v-model 只是语法糖而已。v-bind只是个单向绑定
v-model这个指令只能用在,
1.在一般使用情况下,v-model为:
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
`
})
一.双向绑定列子
那么在表单处理中我们具体如何使用v-model呢,先看看官方文档给出的例子:
1. input文本:{{msg}}
2.
3.
多选的名字checkbox: {{ checkedNames }}
4.
单选框radio: {{ picked }}
5.
单选列表select: {{ vselected }}
6.
{{ option.text }}
Selected: {{ selected }}
7. textarea多行文本:{{ textarea }}
最后data: {{$data}}
var vm =new Vue({
el: '#demo',
data: {
msg : 'hello vue.js!',
checked : true,
checkedNames: [],
picked : '苹果',
vselected:'',
selected: '杜鹃',
options: [
{ text: 'One', value: '杜鹃' },
{ text: 'Two', value: '牡丹' },
{ text: 'Three', value: '百合' }
],
textarea:'hello vue.js!'
}
});
当你在浏览器上调整上面表单元素的选中值时,你会发现下面打印的vue实例内容也会随之改变,而如果你在代码中改变vue实例data内容时渲染出来的表单选中值也会随之改变。
二.修饰符
v-model这个指令还有几个可选的参数:lazy,number,trim,options
1.使用lazy参数是将双向数据同步的时间节点从input触发改为了change触发,调用方式如下:
2.使用number参数是通知v-model绑定的dom元素把用户输入值默认当成数字来处理,调用如下:
3.如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入
4.使用options参数是用于渲染一个select项的列表,调用方式如下:
其中options的参数名指向一个数组,该数组可以包括字符串或对象,对象可以是{text:'', value:''}的形式,指定了
三.例子
1.添加的数据 添加到表格中
export default {
data () {
return {
userData:[{data:'',name:'',address:''}],
model_data:'',
userDatas: [{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
onSubmit(){
this.userDatas.push(this.userData);
}
}
}
四.补充
1.vue.js的双向数据绑定就是通过Object.defineProperty(前端数据双向绑定原理:Object.defineProperty())方法实现的,俗称属性拦截器。