vue下拉框使用法则

最新推荐文章于 2025-02-08 11:06:23 发布

xupen.wu

最新推荐文章于 2025-02-08 11:06:23 发布

阅读量575

点赞数

本文链接：https://blog.youkuaiyun.com/xupeng1997/article/details/108772369

版权

本文详细讲解了在Vue.js中如何实现下拉框的使用，包括基本的选项绑定、事件监听、自定义模板及联动效果。通过实例代码，帮助开发者掌握Vue下拉菜单的创建与应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 小白- 学习教程</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <Select v-model="projectId" placeholder="编辑我……" >
            <Option
              v-for="(item,index) in this.productInfo"
              :value="item.id"
              :key="index"
            >{{ item.name }}</Option>
          </Select>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    projectId :"",
                    productInfo: [
                        {
                            createTime: "2019-01-07",
                            enabled: "Y",
                            id: 1,
                            name: "吴旭鹏",
                            updateTime: "2019-12-23",
                        },
                        {
                            createTime: "2019-01-07",
                            enabled: "Y",
                            id: 1,
                            name: "吴许有",
                            updateTime: "2019-12-23",
                        },
                    ]
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述