zoukankan      html  css  js  c++  java
  • 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变量初始化为一个空数组)。
  • 相关阅读:
    unity3D相机缓慢看向目标物体
    设计原则
    unity3D中GUI标题内文字滚动效果
    python3.6中安装PyQt报错
    codeforces 515B.Drazil and His Happy Friends
    HDU 1029 Ignatius and the Princess IV
    POJ 1052 Plato's Blocks
    Uva220 Othello
    uva201 Squares
    uva1587 Box
  • 原文地址:https://www.cnblogs.com/qkabcd/p/7414088.html
Copyright © 2011-2022 走看看