28 December, 2020

Vue.js Conditions & Loops

                1 comment   

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. CSS Tutorial

  3. JavaScript Tutorial

  4. AngularJS Tutorial

  5. js Tutorial


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

1 comment:

Thanks

Meta

Popular Posts

  • Laravel - Configuration
    In the previous chapter, we have seen that the basic configuration files of Laravel are included in the  config  directory. In this chapte...
  • Laravel - Namespaces
    Namespaces are used in various programming languages to create a separate group of variable, functions and classes. A program may contain ...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...
  • HTML Introduction
    Introduction to Hypertext Markup Language (HTML) A way to present HTML information in a beautiful and attractive way in the World Wide ...
  • Tutorials of Laravel Overview
    Introduction Laravel is an open-source PHP framework, which is robust and easy to understand. It follows a model-view-controller design ...

Categories

Social Media Links

Blog Archive

Laravel News

Loading...