zoukankan      html  css  js  c++  java
  • Vue.js checkbox 练习

    <div id="app">
        <input type="checkbox" v-model="sex" value="1" />足球
        <input type="checkbox" v-model="sex" value="2" />篮球
        <input type="checkbox" v-model="sex" value="3" />乒乓球
        <br />
        {{sex}}
        <br />
        <button v-on:click="clickall(true)">全选</button>
        <button v-on:click="clickall(false)">取消全选</button>
    
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                sex:[]
            }
            ,
            methods: {
                clickall: function (flag) {
                    if (flag) {
                        _this = this;
                        this.sex = [];
                        $.each($(":checkbox"), function (i, v) {
                            _this.sex.push(v.value);
                        });
                    } else {
                        this.sex = [];
                    }
                }
            }
        });
    </script> 
    用自定义指令实现全选和取消全选
    <div id="app">
        <ul>
            <li v-for="item in list">
                <input type="checkbox" v-sel="item.checked" />  {{item.name}}
            </li>
        </ul>
        <br />
        {{list}}
        <br />
        <button v-on:click="clickall(true)">全选</button>
        <button v-on:click="clickall(false)">取消全选</button>
    
    </div>
    <script type="text/javascript">
        Vue.directive("sel", function (el, v) {
            if (v.value) {
                $(el).attr("checked", "checked");
            } else {
                $(el).removeAttr("checked");
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {
                list: [{ name: "足球", checked: true }, { name: "篮球", checked: false }, { name: "乒乓球", checked: true }]
            },
            mounted:function() {
            }
            ,
            methods: {
                clickall: function (flag) {
                    if (flag) {
                        this.list.forEach(function (v, i) {
                            v.checked = true;
                        });
                    } else {
                        this.list.forEach(function (v, i) {
                            v.checked = false;
                        });
                    }
                }
            }
        });
    </script> 
  • 相关阅读:
    红帽7 Shell编程
    红帽7 vim编辑器
    红帽7 管道符、重定向与环境变量
    红帽7 systemctl管理服务的启动、重启、停止、重载、查看状态等常用命令
    python 装饰器详解
    红帽7 常用系统命令
    转 JSON详解
    转 C# using 三种使用方式
    存储过程详解 转
    使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件(转)
  • 原文地址:https://www.cnblogs.com/lunawzh/p/7512289.html
Copyright © 2011-2022 走看看