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

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...
  • Laravel Breeze with PrimeVue v4
    This is an follow up to my previous post about a "starter kit" I created with Laravel and PrimeVue components. The project has b...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...
  • Send message via CANBus
    After some years developing for mobile devices, I've started developing for embedded devices, and I'm finding a new problem now. Th...

Categories

Social Media Links

Blog Archive

Laravel News

Loading...