vue实现把数据渲染到下拉框中，点击其中一个数据，后面接上文本

最新推荐文章于 2024-07-26 19:47:22 发布

Chenyang_lm

最新推荐文章于 2024-07-26 19:47:22 发布

阅读量539

点赞数 1

文章标签： java

本文链接：https://blog.youkuaiyun.com/Chenyang_lm/article/details/120351474

版权

本文介绍如何使用Vue.js将数据动态渲染到下拉选择框，并详细讲解当用户点击选择其中一个选项时，如何在选择框后面显示所选内容的方法。通过实例代码，帮助开发者掌握Vue组件化开发中的这一常见操作。

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
			<select v-model="selected">
            <option v-for="option in optionds"  v-bind:value="option.spell">{{option.name}}</option>
        </select>
        <textarea>{{selected}}</textarea>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                hulusi: [],
                selected: "",
                optionds: [
                    {
                        id: 1,
                        name: '大娃',
                        spell: '力大无穷'
                    },
                    {
                        id: 1,
                        name: '二娃',
                        spell: '千里眼'
                    },
                    {
                        id: 1,
                        name: '三娃',
                        spell: '顺风耳'
                    },
                ]
            },
        })

    </script>
</body>
</html>