Vue入门05（双向绑定）

最新推荐文章于 2024-08-05 23:22:14 发布

徐林2333

最新推荐文章于 2024-08-05 23:22:14 发布

阅读量82

点赞数

分类专栏：前端大二

本文链接：https://blog.csdn.net/weixin_49071539/article/details/115909646

版权

大二同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

输入框显示内容：

<html>
<head>
    <title>vue04</title>
    <meta charset="utf-8"/>
</head>
<body>
<div id="app5">
    输入框<input type="text" v-model="message">{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app5",
        data: {
            message: "a123"
        }

    })
</script>
</html>

效果：
在这里插入图片描述

单选框选中显示内容：

<html>
<head>
    <title>vue04</title>
    <meta charset="utf-8"/>
</head>
<body>
<div id="app6">
    <input type="radio" name="sex" value="男" v-model="sex">男
    <input type="radio" name="sex" value="女" v-model="sex">女
    <p>选中了:{{sex}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app6",
        data: {
            sex: "",
        }
    })
</script>
</html>

效果：
在这里插入图片描述

下拉框多选显示值：

<html>
<head>
    <title>vue07</title>
    <meta charset="utf-8"/>
</head>
<body>
<div id="app7">
    下拉框:<select v-model="selected">
        <option value="">---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>{{selected}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app7",
        data: {
            selected: "",
        }
    })
</script>
</html>