如何在 Vue.js 中使用下拉和单选按钮

作者 : 慕源网 本文共3482个字,预计阅读时间需要9分钟 发布时间: 2021-11-19 共267人阅读

介绍 

在本文中,我们将学习如何使用 Vue.js 中的单选按钮和下拉选择。单选按钮是一种元素,它允许用户从多个选项中只选择一个选项。

您可以从下面提到的链接中查看我之前关于 Vue.js 的文章。 

先决条件

  • 我们应该具备 HTML 和 Vue.js 的基本知识 
  • Visual Studio Code编辑器

创建 VueJS 项目

使用以下命令创建一个 Vue.js 项目。

vue create Dropdowndemo

现在在 Vs 代码中打开这个项目并安装引导程序。

npm install bootstrap-vue bootstrap --save

现在打开 main.js 文件并导入引导程序引用。

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

现在右键单击 components 文件夹并添加一个名为“dropdowndemo.vue”的新组件。现在打开 dropdowndemo.vue 组件并添加以下代码。

<template>
  <div id="app">
    <div class="row" style="margin:10px">
      <div class="col-sm-12 btn btn-info"> How To Use Dropdown And Radio Buttons In Vue.js </div>
    </div>
    <div class=" row col-sm-12">
      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <select class="form-control" @change="changevalue($event)">
          <option value="" selected disabled>Select Value</option>
          <option v-for="data in rowData" :value="data.Id" :key="data.Id">{{ data.Name }}</option>
        </select>
      </div>
      <div class="col-sm-4"></div>
    </div>
    <br>
    <br>
    <p v-if="seen">
      <span>Selected Value: <b> {{ selectedvalue  }}</b>
      </span>
    </p>
  </div>
</template>
<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  export default {
    name: 'Dropdowndemo',
    data() {
      return {
        selectedvalue: 'No Value Selected',
        seen: false,
        rowData: [{
          Id: "100",
          Name: "Sanwar",
          Age: "25",
          Address: "Jaipur",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "2",
          Name: "Nisha",
          Age: "25",
          Address: "C-Scheme",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "3",
          Name: "David",
          Age: "25",
          Address: "C-Scheme",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "4",
          Name: "Sam",
          Age: "25",
          Address: "C-Scheme",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "5",
          Name: "Jyotsna",
          Age: "25",
          Address: "C-Scheme",
          City: "Mumbai",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "6",
          Name: "Sid",
          Age: "25",
          Address: "C-Scheme",
          City: "Bangalore",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "7",
          Name: "Chavi",
          Age: "25",
          Address: "C-Scheme",
          City: "Noida",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "8",
          Name: "Nisha",
          Age: "25",
          Address: "C-Scheme",
          City: "Delhi",
          Salary: "500000",
          Department: "IT",
        }]
      }
    },
    methods: {
      changevalue(event) {
        this.selectedvalue = event.target.options[event.target.options.selectedIndex].text
        console.log(this.selectedvalue)
        this.seen = true;
      }
    }
  }
</script>
<style></style>

现在打开 App.vue 组件并导入 dropdowndemo 组件。在 App.vue 组件中添加以下代码。

<template>
  <div id="app">
    <Dropdowndemo />
  </div>
</template>
<script>
  import Dropdowndemo from './components/dropdowndemo.vue'
  export default {
    name: 'App',
    components: {
      Dropdowndemo
    }
  }
</script>
<style></style>

现在使用“npm run serve”命令运行应用程序并检查。

如何在 Vue.js 中使用下拉和单选按钮

从下拉列表中选择一个值,

如何在 Vue.js 中使用下拉和单选按钮

现在右键单击 Src 文件夹 > components 文件夹并创建一个名为“radiobuttondemo.vue”的新组件。并在此文件中添加以下代码

<template>
  <div id="app">
    <div class="row" style="margin:10px">
      <div class="col-sm-12 btn btn-info"> How To Use Dropdown And Radio Buttons In Vue.js </div>
    </div>
    <div class=" row col-sm-12"></div>
    <br>
    <br>
    <div>
      <input type="radio" name="test_id" @change="onChange($event)" value="male"> Male <input type="radio" name="test_id" @change="onChange($event)" value="female"> Female
    </div>
  </div>
</template>
<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  export default {
    name: 'radiobuttondemo',
    data() {
      return {}
    },
    methods: {
      onChange(event) {
        var data = event.target.value;
        console.log(data);
        alert(data)
      }
    }
  }
</script>
<style></style>

现在打开 App.vue 组件并导入 radiobuttondemo 组件。在 App.vue 组件中添加以下代码。

<template>
  <div id="app">
    <radiobuttondemo />
  </div>
</template>
<script>
  import radiobuttondemo from './components/radiobuttondemo.vue'
  export default {
    name: 'App',
    components: {
      radiobuttondemo
    }
  }
</script>
<style></style>

现在使用“npm run serve”命令运行应用程序并检查。

如何在 Vue.js 中使用下拉和单选按钮

选择一个值并检查,

如何在 Vue.js 中使用下拉和单选按钮

总结

在本文中,我们学习了如何在 Vue.js 应用程序中使用下拉菜单和单选按钮


慕源网 » 如何在 Vue.js 中使用下拉和单选按钮

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录