Vue写一个简单的下拉选项框

最新推荐文章于 2024-07-30 16:12:41 发布

浮生若梦777

最新推荐文章于 2024-07-30 16:12:41 发布

阅读量466

点赞数 7

分类专栏：前端(Vue/Javascript) 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_58626489/article/details/135826995

版权

前端(Vue/Javascript) 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

使用vue协议个简单的下拉选项框，通过响应式数据可以动态绑定选项框数据。

将数据放在一个数组中以对象的形式存储，option中使用v-for遍历数据，拿出需要的值就可以了。

下面以一个名称和链接举例子，拿出连接后可以直接绑定在标签属性中使用。因为只能引用data中的数据，所以还是要将select选中的数据于data中的变量绑定。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p><a :href="sel.net" style="text-decoration: none;">{{sel.name}}</a></p><br>
        <select id="qq" v-model="sel" style="width: 100px;" >
            <option v-for="adr in adress" :value="adr">{{adr.name}}</option>
        </select>
        <p>你选择了：{{sel.net}}</p>
    </div>


    <script>
        const app = Vue.createApp({
            data() {
                return {
                    adress:[
                        {name:'百度',net:'http://www.baidu.com'},
                        {name:'菜鸟',net:'http://www.runoob.com'},
                        {name:'阿里',net:'http://www.ali.com'}
                    ],
                    sel:{name:'百度',net:'http://www.baidu.com'},
                    name1:''
                }
            },
            methods: {

            }
        })

        app.mount('#app')
    </script>
</body>
</html>