CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

28 December, 2020

Vue.js Conditions & Loops

 Programing Coderfunda     December 28, 2020     Vue.js Tutorial     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. 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
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • VueJS Examples Example 1: Currency Converter<html> <head> <title>VueJs Instance</title> <script type = "text/javascript"… Read More
  • Vue.js TutorialVue.js TutorialVue.js tutorial provides basic and advanced concepts of Vue.js. Our Vue.js Tutorial is designed for beginners and professionals both.Vu… Read More
  • Vue.js Tutorial Vue.js InstallationCompatibility CheckBefore going to install and use Vue.js in your project, you should check the compatibility issues. Vue doe… Read More
  • VueJS - Quick Guide VueJS - OverviewVueJS is an open source progressive JavaScript framework used to develop interactive web interfaces. It is one of the famou… Read More
  • VueJS - Reactive InterfaceVueJS provides options to add reactivity to properties, which are added dynamically. Consider that we have already created vue instance and need to ad… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Spring boot app (error: method getFirst()) failed to run at local machine, but can run on server
    The Spring boot app can run on the online server. Now, we want to replicate the same app at the local machine but the Spring boot jar file f...
  • Log activity in a Laravel app with Spatie/Laravel-Activitylog
      Requirements This package needs PHP 8.1+ and Laravel 9.0 or higher. The latest version of this package needs PHP 8.2+ and Laravel 8 or hig...
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh
    I had follow these steps to install an configure firebase to my cordova project for cloud messaging. https://medium.com/@felipepucinelli/how...
  • Step-by-step guide to linking gnuplot to Octave within Virtual Studio Code (VSC)
    I am aware of a number of previous questions (here, here and here for example) pointing out to the need to modify a file named .octaverc. ...
  • Laravel auth login with phone or email
          <?php     Laravel auth login with phone or email     <? php     namespace App \ Http \ Controllers \ Auth ;         use ...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Track Metrics Effortlessly with Laravel's Context Increment and Decrement Methods - 5/4/2025
  • NativePHP Hit $100K — And We're Just Getting Started 🚀 - 5/8/2025
  • Name Queued Closures in Laravel 12.13 - 5/9/2025
  • Simplify HasManyThrough Relationships with Laravel's CanBeOneOfMany Support - 5/4/2025
  • Using Database Comments to Track Columns With Sensitive Data - 5/7/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda