Two way data binding vue js 3
Two way data binding
=================================================
//this is the manual way for two way data binding noy vue js format
//html
<div id="app">
<h2>Enter Number: </h2>
<input :value="num" type="text" @input="handleInput">
<br>
<button @click="getDouble">Get Double</button>
<button @click="getSquare">Get Square</button>
<button @click="reset">Reset</button>
<br>
<label>Entered Numberd: {{num}} </label>
<br>
<label>Result: {{result}} </label>
</div>
//js
var app = Vue.createApp({
data(){
return{
num: "",
result: ""
};
},
methods: {
handleInput(e){
this.num = e.target.value;
},
getDouble(){
this.result = this.num * 2;
},
getSquare(){
this.result = this.num * this.num;
},
reset(){
this.num = "";
this.result = "";
}
}
});
app.mount('#app');
......................................
//using vue js for two way data binding
//html
<div id="app">
<h2>Enter Number: </h2>
<input v-model="num" type="text" >
<br>
<button @click="getDouble">Get Double</button>
<button @click="getSquare">Get Square</button>
<button @click="reset">Reset</button>
<br>
<label>Entered Numberd: {{num}} </label>
<br>
<label>Result: {{result}} </label>
</div>
/js
var app = Vue.createApp({
data(){
return{
num: "",
result: ""
};
},
methods: {
getDouble(){
this.result = this.num * 2;
},
getSquare(){
this.result = this.num * this.num;
},
reset(){
this.num = "";
this.result = "";
}
}
});
app.mount('#app');
...................................
//input er value ke addition korle string add hoy tai event modifier korte hoy.
//html
<div id="app">
<h2>Enter Number: </h2>
<input v-model.number="num" type="text" > //event modifier kora hoyese.
<br>
<button @click="getDouble">Get Double</button>
<button @click="getSquare">Get Square</button>
<button @click="reset">Reset</button>
<button @click="addTwo">Add Two</button>
<br>
<label>Entered Numberd: {{num}} </label>
<br>
<label>Result: {{result}} </label>
</div>
//js
var app = Vue.createApp({
data(){
return{
num: "",
result: ""
};
},
methods: {
getDouble(){
this.result = this.num * 2;
},
getSquare(){
this.result = this.num * this.num;
},
addTwo(){
this.result = this.num + 2;
},
reset(){
this.num = "";
this.result = "";
}
}
});
app.mount('#app');
............................
No comments