Vue 测试版本：Vue.js v2.5.13
在 Vue 中，可以利用 v-model 语法糖实现数据的双向绑定，例如：
<div id="app">
<input
type="text"
v-model="id"
placeholder="please enter your id"
/>
<p>your id is: {{ id | formatId }}</p>
</div>
window.onload = function() {
Vue.filter('formatId', function(v) {
return v.length < 10 && v.length > 0 ? v.padStart(10, '0') : v;
});
new Vue({
el: '#app',
data: {
id: ''
}
});
};但是有时，我们可能希望用 模板 实现，那么情况就是这样：
<div id="app">
<my-ele :id="id"></my-ele>
</div>
window.onload = function() {
Vue.component('my-ele', {
template: `
<div>
<input type="text" v-model="id"/>
<p>you id: {{id | formatId}}</p>
</div>
`,
props: ['id']
});
Vue.filter('formatId', function(v) {
return v.length < 10 && v.length > 0 ? v.padStart(10, '0') : v;
});
new Vue({
el: '#app',
data: {
id: ''
}
});
};目前为止，都是比较简单的，问题就在于，有时，我们还需要用 render() 函数来实现：
<div id="app">
<my-ele
:val-par="id"
@input-par="id=arguments[0]"
></my-ele>
</div>
window.onload = function() {
Vue.component('my-ele', {
render(createElement) {
let self = this;
let input = createElement('input', {
domProps: {
type: 'text',
placeholder:'please enter your id',
value: this.valPar,
},
on: {
input(e) {
self.$emit('input-par', e.target.value);
}
}
});
let p = createElement('p', {
props: {
id: this.valPar
}
}, 'your id is: '+this.formatId(this.valPar));
return createElement('div', [input, p]);
},
props: ['valPar'],
methods: {
formatId(v) {
return v.length < 10 && v.length > 0 ? v.padStart(10, '0') : v;
}
}
});
new Vue({
el: '#app',
data: {
id: ''
}
});
};主要注意两点：
- value 的双向绑定在设置在 domProps 而不是 props
- 过滤器自己实现了个，并不能用 Vue.filter
参考文档：
https://cn.vuejs.org/v2/guide/render-function.html#深入-data-对象