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

最新推荐文章于 2023-01-18 15:03:26 发布

转载最新推荐文章于 2023-01-18 15:03:26 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qkabcd/p/7414088.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍使用Vue实现Checkbox和Select多选功能的方法。通过给v-model绑定相同数组类型的属性来实现Checkbox多选；利用select标签的multiple属性结合Vue的数据绑定特性实现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变量初始化为一个空数组)。