Vue学习笔记3 - Vue中 radio/select 如何设定初期值

东京老树根

已于 2023-05-09 09:53:32 修改

阅读量860

点赞数 1

分类专栏： Vue学习笔记文章标签：笔记

于 2023-05-09 09:48:17 首次发布

本文链接：https://blog.csdn.net/shi_ly/article/details/130529111

版权

Vue学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用 v-model 如何设定 radio的初期值呢？

使用v-model 绑定 value 属性，然后设置初始 value 属性的值即可。

比如

sexValue设置为女，那么女那项就会被默认选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="sexValue">男
    <input type="radio" name="sex" value="女" v-model="sexValue">女

    <br/>
    {{sexValue}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            sexValue: '女'
        }
    });
</script>
</body>
</html>

运行一下：

select 元素也一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    下拉框：
    <select v-model="optionValue">
        <option value="" disabled>请选择</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <br/>
    {{optionValue}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            optionValue: '2'
        }
    });
</script>
</body>
</html>

运行一下：