In Vue, you can use V-model syntax sugar to implement two-way binding of data, such as:
<DivID= "App"> <inputtype= "text"V-model= "id"placeholder= "Please enter your ID" /> <P>Your ID is: {{id | formatid}}</P></Div>
function () { vue.filter(function(v) { return V.length < 10 && v.length > 0? V.padstart (0 '): v; }); New Vue ({ ' #app ', data: { ' } });
But sometimes we might want to do it with a template, and that's the case:
<id= "app"> <: 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) {returnV.length < && v.length > 0? V.padstart (10, ' 0 '): v; }); NewVue ({el:' #app ', data: {ID:‘‘ } });};
So far, the problem is that sometimes we need to use the render () function to implement:
<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) {. $emit (' Input-par ', E.target.value); } } }); Let P= createelement (' P ', {props: {ID: This. Valpar}},' Your ID is: ' + This. FormatID ( This. Valpar)); returncreateelement (' div ', [Input, p]); }, props: [' Valpar '], methods: {FormatID (v) {returnV.length < && v.length > 0? V.padstart (10, ' 0 '): v; } } }); NewVue ({el:' #app ', data: {ID:‘‘ } });};
Main note two points:
- The two-way binding of value is set at domprops instead of props
- The filter has been implemented by itself and cannot be used Vue.filter
Reference Documentation:
https://cn.vuejs.org/v2/guide/render-function.html# Deep-data-Objects
vue-bidirectional binding: From HTML to template to render function