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

程序员雪利技术 2022年11月11日

0 收藏 415 点赞 3,721 浏览 994 个字

另外一种实现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变量初始化为一个空数组)。