v-model 结合 select 类型使用

最新推荐文章于 2024-05-07 08:34:16 发布

莫余

最新推荐文章于 2024-05-07 08:34:16 发布

阅读量212

点赞数

分类专栏：凌晨3:40的Vue 文章标签： vue checkbox

本文链接：https://blog.csdn.net/qq_44824148/article/details/112827115

版权

凌晨3:40的Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

select 类型

单选：只能选中一个值。

v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <select name="aaa" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="榴莲">榴莲</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>您选择的水果是: {{fruit}}</h2>

    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                fruit: '苹果',
                fruits: []
            },
            methods: {

            }
        })
    </script>
</body>

</html>

多选：可以选中多个值。

v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <select name="aaa" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="榴莲">榴莲</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>您选择的水果是: {{fruits}}</h2>

    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                fruit: '苹果',
                fruits: []
            },
            methods: {

            }
        })
    </script>
</body>

</html>

莫余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
v-model 结合 select 类型使用

select 类型单选：只能选中一个值。v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到mySelect中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫