28 December, 2020

Vue.js Conditions & Loops

                No comments   

Vue.js Conditions & Loops

Conditions and Loops are used in all programming languages to provide repetitive control structures. They can repeat one or more various steps depending on the conditions. Same we can use in the case of Vue.js.

v-if Directive Example

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>         
  7.         <div id="app">  
  8. <span v-if="seen">This is visible to you</span>  
  9.         </div>             
  10.         <script src="index.js"></script>  
  11.     </body>  
  12. </html>  

Index.js file:

  1. var app = new Vue({  
  2.   el: '#app',  
  3.   data: {  
  4.     seen: true  
  5.   }  
  6. })  

Note: Here, we have used a simple CSS file to make the output more attractive. This CSS file will be the same for all the following examples.

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

Output:

This is visible to you
Vue.js Conditions & Loops

In the above example, if you enter app3.seen = false, you will see that the message disappears.

Example2:

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>         
  7.         <div id="app">  
  8. <span v-if="seen">This is visible to you</span>  
  9.         </div>             
  10.         <script src="index.js"></script>  
  11.     </body>  
  12. </html>  

Index.js file:

  1. var app = new Vue({  
  2.   el: '#app',  
  3.   data: {  
  4.     seen: false  
  5.   }  
  6. })  

Output:

Vue.js Conditions & Loops

In the above example, you can see that you can bind data to not only text and attributes, but also the structure of the DOM. Vue also provides a powerful transition effect system that can automatically apply transition effects when the elements are inserted, updated, or removed by Vue.

v- else-if Directive Example

We can use the v- else-if directive to provide an else functionality in the above example. By using this directive, if the condition is not satisfied or not true then it will return the else statement that you set for the program. Let's see an example.

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>         
  7.         <div id="app">  
  8.             <span v-if="seen">Now you see me</span>  
  9.             <span v-else-if=>You can't see me </span>  
  10.         </div>             
  11.         <script src="index.js"></script>  
  12.     </body>  
  13. </html>  

Index.js file:

  1. var app = new Vue({  
  2.   el: '#app',  
  3.   data: {  
  4.     seen: false   
  5.   }  
  6. })  

Output:

You can't see me
Vue.js Conditions & Loops

In the above example, you can see that the output is shown as "You can't see me" which is set as v-else-if statement. There are also some other directives in Vue.js that can be used for their own special functionalities.

v- for Directive Example

The v-for directive is used to display a list of items using the data from an Array. See the following example.

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>         
  7. <div id="app-4">  
  8.   <ol>  
  9.     <li v-for="todo in todos">  
  10.       {{ todo.text }}  
  11.     </li>  
  12.   </ol>  
  13. </div>  
  14.         <script src="index.js"></script>  
  15.     </body>  
  16. </html>  

Index.js file:

  1. var app4 = new Vue({  
  2.   el: '#app-4',  
  3.   data: {  
  4.     todos: [  
  5.       { text: 'HTML Tutorial' },  
  6.       { text: 'CSS Tutorial' },  
  7.       { text: 'JavaScript Tutorial' },  
  8.       { text: 'AngularJS Tutorial' },  
  9.       { text: 'Vue.js Tutorial' }  
  10.     ]  
  11.   }  
  12. })  

Output:

    

  1. HTML Tutorial
    2. 

  2. CSS Tutorial
    3. 

  3. JavaScript Tutorial
    4. 

  4. AngularJS Tutorial
    5. 

  5. js Tutorial
    6.

Output:

Vue.js Conditions & Loops

Handling User Input

The v-on directive facilitates users to interact with your Vue.js app. It is used to attach event listeners that invoke methods on Vue instances. Let's see an example of v-on directive.

v-on Directive Example

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>        
  7.         <div id="app">  
  8.             <p>{{ message }}</p>  
  9.             <button v-on:click="reverseMessage">Click Here to Reverse Message</button>  
  10.         </div>         
  11.         <script src="index.js"></script>  
  12.     </body>  
  13. </html>  

Index.js file:

  1. var app = new Vue({  
  2.   el: '#app',  
  3.   data: {  
  4.     message: 'This is  Vue.js Example!'  
  5.   },  
  6.   methods: {  
  7.     reverseMessage: function () {  
  8.       thisthis.message = this.message.split('').reverse().join('')  
  9.     }  
  10.   }  
  11. })  

Output:

Vue.js Conditions & Loops

After clicking on the "Click Here to Reverse Message" button, the above string will be reversed.

Vue.js Conditions & Loops

In the above example, the state of app is updated without touching the DOM. All DOM manipulations are handled by Vue itself.

v-model Directive Example

The v-model directive is used to make two-way data binding between form input and app state. See the following example:

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>         
  7.         <div id="app">  
  8.   <p>{{ message }}</p>  
  9.   <input v-model="message">  
  10. </div>          
  11.         <script src="index.js"></script>  
  12.     </body>  
  13. </html>  

Index.js file:

  1. var app6 = new Vue({  
  2.   el: '#app',  
  3.   data: {  
  4.     message: 'Two way data binding!'  
  5.   }  
  6. })  

Output:

Vue.js Conditions & Loops

You will see the automatic synchronization of data in the above example. When you change the data in one component, the change will be reflected in both components. See the below example:

Vue.js Conditions & Loops

Composing with Components

The component system is used when we want to build large-scale applications composed of small, self-contained, and often reusable components. A large application interface can be abstracted into a tree of components:

Vue.js Conditions & Loops

Here, we use the v-bind directive to pass values in repeated component. See the following example:

Index.html file:

  1. <html>  
  2.     <head>  
  3.         <link rel="stylesheet" href="index.css">  
  4.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  5.     </head>  
  6.     <body>        
  7.         <div id="app">  
  8.   <ol>  
  9.     <todo-course  
  10.       v-for="course in courseList"  
  11.       v-bind:todo="course"  
  12.       v-bind:key="course.id"  
  13.     ></todo-course>  
  14.   </ol>  
  15. </div>          
  16.         <script src="index.js"></script>  
  17.     </body>  
  18. </html>  

Index.js file:

  1. Vue.component('todo-course', {  
  2.   props: ['todo'],  
  3.   template: '<li>{{ todo.text }}</li>'  
  4. })  
  5. var app = new Vue({  
  6.   el: '#app',  
  7.   data: {  
  8.     courseList: [  
  9.       { id: 0, text: 'Java' },  
  10.       { id: 1, text: 'PHP' },  
  11.       { id: 2, text: 'Angular' },  
  12.       { id: 3, text: 'Vue.js' }  
  13.     ]  
  14.   }  
  15. })  

Output:

Vue.js Conditions & Loops

by : javatpoint.com

Related Posts:

  • Vue.js Computed PropertiesVue.js Computed Properties In Vue.js, computed properties are used when we have to handle complex logic and operations. Computed properties are j… Read More
  • Vue.js InstanceVue.js InstanceTo start a Vue application, you have to create a new Vue instance by using the Vue function. Whenever we create a new Vue project, the … Read More
  • Vue.js ComponentVue.js ComponentVue.js components are one of Vue.js' most important features and used to create custom elements that can be reused in HTML. Compo… Read More
  • Vue.js Watch PropertyVue.js Watch PropertyThe Vue.js Watcher or watch property allows the developers to listen to the component data and run whenever they change a particu… Read More
  • Vue.js TemplateVue.js TemplateIn the previous Vue.js Instance chapter, we have learned how to get an output in the form of text content on the screen. In this chapte… Read More

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

Categories

Social Media Links

Blog Archive