Vue.js v-once Directive
Last Updated :
14 Jul, 2020
The v-once directive is a Vue.js directive that is used to avoid unwanted re-renders of an element. It treats the element as a static content after rendering it once for the first time. This improves performance as it does not have to be rendered again. First, we will create a div element with the id of choice. The v-once directive is then applied to this element to make it render only once.
Syntax:
v-once
Parameters: This function does not accept any parameter.
Example: This example uses Vue.js to show the working of the data with v-once.
<!DOCTYPE html>
< html >
< head >
< title >
VueJS v-once Directive
</ title >
< script src =
</ script >
</ head >
< body >
< div style="text-align: center;
width: 600px;">
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
VueJS | v-once directive
</ b >
</ div >
< div id = "canvas" style=
"border: 1px solid #000000;
width: 600px; height: 200px;">
< div id = "app" style="text-align: center;
padding-top: 40px;">
< h1 v-once>{{ data }}</ h1 >
</ div >
</ div >
< script >
var app = new Vue({
el: '#app',
data: {
data: 'GeeksforGeeks'
}
})
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...