How to use Vue js for DropdownList

February 17 2019 by Admin

In this article, we have described how to use Vue.js for DropdownList binding with example code.

vue.js is a progressive framework for building user interfaces that are used for two way bind.

Vue.js is a lightweight alternative to other Javascript frameworks like AngularJS.

Vue.Js And Html Page

Components are one of the most powerful features of Vue.js, so there are many advantages in vue js.

Easy to understand and more flexible and manageable codes.

<html>

<head>

<title>how to bind a dropdownlist in vue js</title>

</head>

<body>

<div>

Normal Dropdownlist

<option v-bind:value="-1">Select</option>

</option>

</select>

<br />

bootstrap Dropdownlist:

</button>

<li v-for="users in ddlUser" v-on:click="selectedvalue(users.Name)"><a href="#">{{users.Name }} </a></li>

</ul>

</div>

</form>

</body>

var app = new Vue({

el: '#app',

data: {

ddlUser: [{

"id": "1",

"Name": "RJboy",

"role": "Admin"

{

"id": "2",

"Name": "peter",

"role": "viceAdmin"

{

"id": "3",

"Name": "John",

"role": "Member"

}],

User: -1,

Userdrp: "Select"

methods: {

selectedvalue: function (name) {

this.Userdrp = name;

}

})

</script>

</html>

Demo

Download

Home > ASP.NET > How to use Vue js for DropdownList

How to use Vue js for DropdownList

Related Articles

How to use gridview in asp.net with C# using Mysql

2/1/2019 11:51:00 PM By Admin

2236 Views

How to use gridview with datatable in asp.net with C# using Mysql

2/3/2019 9:50:00 PM By Admin

1883 Views

How to bind gridview with datatable in asp.net with C# without using the database

2/3/2019 10:35:00 PM By Admin

5497 Views

How to bind gridview with datatable in asp.net with c# without using the database

2/3/2019 10:35:00 PM By Admin

2385 Views

How to fetch data from database in Asp.net

2/10/2019 10:05:00 PM By Admin

7494 Views

How to insert and retrieve data from the database in vue js using asp.net with C#

3/4/2019 7:54:00 AM By Admin

8219 Views

How to bind Repeater control from database in Asp.net

3/10/2019 10:51:00 AM By Admin

3924 Views

how to save and retrieve session value in asp.net

3/30/2019 5:59:00 AM By Admin

1914 Views

How to use Session variables asp.net c#

4/2/2019 11:24:00 AM By Admin

11850 Views

How to pass list of items using session in asp.net

4/2/2019 12:07:00 PM By Admin

3134 Views

Comments

Leave a Reply

Comment:^*

Please your Comment !

Email ID:^*

Enter Your Email Id ! Enter Your Validate Email Id !

Name:^*

Enter your Name !

RECENT POSTS

Technology

Information

Tags

Email Alerts

Home > ASP.NET > How to use Vue js for DropdownList

Related Articles

How to use gridview in asp.net with C# using Mysql 2/1/2019 11:51:00 PM By Admin 2236 Views

How to use gridview with datatable in asp.net with C# using Mysql 2/3/2019 9:50:00 PM By Admin 1883 Views

How to bind gridview with datatable in asp.net with C# without using the database 2/3/2019 10:35:00 PM By Admin 5497 Views

How to bind gridview with datatable in asp.net with c# without using the database 2/3/2019 10:35:00 PM By Admin 2385 Views

How to fetch data from database in Asp.net 2/10/2019 10:05:00 PM By Admin 7494 Views

How to insert and retrieve data from the database in vue js using asp.net with C# 3/4/2019 7:54:00 AM By Admin 8219 Views

How to bind Repeater control from database in Asp.net 3/10/2019 10:51:00 AM By Admin 3924 Views

how to save and retrieve session value in asp.net 3/30/2019 5:59:00 AM By Admin 1914 Views

How to use Session variables asp.net c# 4/2/2019 11:24:00 AM By Admin 11850 Views

How to pass list of items using session in asp.net 4/2/2019 12:07:00 PM By Admin 3134 Views