在 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: ‘‘
        }
    });
};

主要註意兩點：

1. value 的雙向綁定在設置在 domProps 而不是 props
2. 過濾器自己實現了個，並不能用 Vue.filter

參考文檔：

https://cn.vuejs.org/v2/guide/render-function.html#深入-data-對象

Vue-雙向綁定：從 html 到 模板 到 渲染函數