Vue在单选框和下拉框中使用双向数据绑定

最新推荐文章于 2024-06-19 16:55:13 发布

永远热爱夏天的风

最新推荐文章于 2024-06-19 16:55:13 发布

阅读量2.8k

点赞数

分类专栏：日常学习日常分享

本文链接：https://blog.csdn.net/pillow233/article/details/103408978

版权

日常学习同时被 2 个专栏收录

55 篇文章 1 订阅

订阅专栏

日常分享

22 篇文章 1 订阅

订阅专栏

Vue在单选框和下拉框中使用双向数据绑定在这里插入代码片

单行文本：

<head>
    <meta charset="UTF-8">
    <title>Java</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>

<!--我们这里希望，输入框的值和{}取值动态绑定，实时相同，我们就使用v-model绑定message-->
<div id="vue">
    单行文本：<input type="text" v-model="message" value="hello" />&nbsp;&nbsp;单行文本是：{{message}}
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: "Hello Vue"
        }
    });
</script>

</body>
</html>

多行文本：

<div id="vue">
    多行文本：<textarea v-model="message"></textarea>&nbsp;&nbsp;多行文本是：{{message}}
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: "Hello Textarea"
        }
    });
</script>

单复选框：

<div id="vue">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    <label for="checkbox">{{ checked }}</label>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            checked: false
        }
    });
</script>

多复选框：

<div id="vue">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            checkedNames: []
        }
    });
</script>

单选按钮：

<div id="vue">
    单选按钮：
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值: {{ picked }}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            picked: ''
        }
    });
</script>

下拉框：

<div id="vue">
    下拉框：
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的值: {{ selected }}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            selected: ''
        }
    });
</script>

永远热爱夏天的风

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue在单选框和下拉框中使用双向数据绑定

Vue在单选框和下拉框中使用双向数据绑定在这里插入代码片单行文本：<head> <meta charset="UTF-8"> <title>Java</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></sc...
复制链接

扫一扫

专栏目录