Method and Event vue js 3
Method and Events
======================================================================================
//app.js er code
var app = Vue.createApp({
data(){
return{ };
},
methods: {
getCurrentTime(){
let ct = Date();
return new Date();
}
}
})
app.mount('#app');
........................
<div id="app">
<h2>Time {{getCurrentTime()}}</h2> //index.html file er code
</div>
output: Time "2021-06-24T20:06:18.192Z" ///current date display korbe
...............................................
<div id="app">
<h2>Time {{1+1}}</h2>
</div>
outpt: 2 //simple javascript er code e kora jay.
............................................................................
var app = Vue.createApp({
data(){
return{
count: 0
};
},
methods: {
increse(){
this.count++;
},
decrease(){
this.count--;
}
}
})
app.mount('#app');
---------
<div id="app">
<h2>count: {{count}}</h2>
<button v-on:click="increse">increment</button>
<button v-on:click="decrease">decrement</button>
</div>
//value increment and decrement korbe display te.
<button @click="increse">increment</button> //shortcut way te click event use
<button @click="decrease">decrement</button>
...............................................................
//different way te increment and decrement kora.
var app = Vue.createApp({
data(){
return{
count: 0
};
},
methods: {
increse(){
this.count++;
},
decrease(){
this.count--;
}
}
})
app.mount('#app');
.........
<div id="app">
<h2>count: {{count}}</h2>
<button @click="count = count +1 ">increment</button>
<button @click="count = count -1">decrement</button>
</div>
...................................................................
No comments