vue的checkbox或多选的select的代码例子

Posted 2020-10-04 qkabcd

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的checkbox或多选的select的代码例子相关的知识，希望对你有一定的参考价值。

另外一种实现checkbox的vue绑定方法代码：

给v-model绑定一个相同的数组类型的属性：
<div id="app">
    <label>jack<input type="checkbox" v-model="whom" value="jack"/></label>
    <label>bob<input type="checkbox" v-model="whom" value="bob"/></label>
    <label>alice <input type="checkbox" v-model="whom" value="alice"/></label>
    <p>已选：{{whom.join(‘|‘)}}</p>
</div>
<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            whom: []
    }
    })
</script>

实现select多选的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../js/vue2.js"></script>
    <script src="../js/vue-resource.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="selected" multiple>
            <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
        </select>
        <span>已选:{{selected}}</span>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                items: [{ text: ‘A‘, value: ‘a‘ }, { text: ‘B‘, value: ‘b‘ }, { text: ‘C‘, value: ‘c‘ }],
                selected: []
            }
        });
    </script>
</body>
</html>
只需要在select标签中写入multiple属性(同时vue中，selected变量初始化为一个空数组)。

以上是关于vue的checkbox或多选的select的代码例子的主要内容，如果未能解决你的问题，请参考以下文章

怎么在jqgrid中设置checkbox多选，怎么获取多选的值

vue checkbox多选框按钮添加全选按钮

怎么在jqgrid中设置checkbox多选，怎么获取多选的值

分页怎么保留checkbox选中的值就是点击下一页上一页的多选的勾还在

实现checkbox的多选