{"id":2008,"date":"2017-04-10T17:50:38","date_gmt":"2017-04-10T09:50:38","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2008"},"modified":"2017-04-10T17:50:38","modified_gmt":"2017-04-10T09:50:38","slug":"%e7%94%a8vue%e5%86%99%e4%b8%80%e4%b8%aateb%e5%88%87%e6%8d%a2","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2008","title":{"rendered":"\u7528vue\u5199\u4e00\u4e2ateb\u5207\u6362"},"content":{"rendered":"
<!doctype html>\r\n<html>\r\n<head>\r\n        <meta charset=\"utf-8\">\r\n        <title>tab\u5207\u6362<\/title>\r\n        <meta name=\"keywords\" content=\"\">\r\n        <meta name=\"description\" content=\"\">\r\n        <style>\r\n        *{\r\n                margin: 0;padding: 0;\r\n        }\r\n        ul li{\r\n                list-style: none;\r\n        }\r\n                #box{\r\n                        width: 606px;\r\n                        height: 354px;\r\n                        border:1px solid black;\r\n                        margin: 50px auto;\r\n                }\r\n                #head{\r\n                        overflow: hidden;\r\n                }\r\n                #head h1{\r\n                        width:200px;\r\n                        height: 100px;\r\n                        border:1px solid black;\r\n                        font-size: 32px;\r\n                        color: black;\r\n                        float: left;\r\n                        text-align: center;\r\n                        line-height: 100px;\r\n                }\r\n                #con li{\r\n                        width: 604px;\r\n                        height: 250px;\r\n                        border:1px solid black;\r\n                        font-size: 45px;\r\n                        text-align: center;\r\n                        line-height: 250px;\r\n                        color: black;\r\n                        display: none;\r\n                }\r\n                #head .color{\r\n                        background-color: green;\r\n                        color: #fff;\r\n                }\r\n                #con .neirong{\r\n                        display: block;\r\n                }\r\n        <\/style>\r\n<\/head>\r\n<body>\r\n        <div id=\"box\">\r\n                <div id=\"head\">\r\n                        <h1 v-for=\"(h,index) in h1s\" @click=\"Tab(index)\" v-bind:class=\"{color:h.isfalse}\">{{h.h1}}<\/h1>\r\n                <\/div>\r\n                <ul id=\"con\">\r\n                        <li v-for=\"(li,index) in lis\" v-bind:class=\"{neirong:li.isfalse}\">{{li.li}}<\/li>\r\n                <\/ul>\r\n        <\/div>\r\n<\/body>\r\n<script src=\"js\/vue.js\"><\/script>\r\n<script>\r\n        var vm=new Vue({\r\n                el:\"#box\",\r\n                data:{\r\n                        h1s:[\r\n                                {h1:\"\u6807\u98981\",isfalse:true},\r\n                                {h1:\"\u6807\u98982\",isfalse:false},\r\n                                {h1:\"\u6807\u98983\",isfalse:false}\r\n                        ],\r\n                        lis:[\r\n                                {li:\"\u5185\u5bb9111\",isfalse:true},\r\n                                {li:\"\u5185\u5bb9222\",isfalse:false},\r\n                                {li:\"\u5185\u5bb9333\",isfalse:false}\r\n                        ]                },\r\n                methods:{\r\n                        Tab:function(index){\r\n                                this.h1s.forEach(function(item){\r\n                                        item.isfalse=false;\r\n                                });\r\n                                this.lis.forEach(function(item){\r\n                                        item.isfalse=false;\r\n                                })\r\n                                this.h1s[index].isfalse=true;\r\n                                this.lis[index].isfalse=true;\r\n                        }\r\n                }\r\n        })\r\n\r\n<\/script>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u7528vue\u5199\u4e00\u4e2ateb\u5207\u6362<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!doctype html> <html> <head> <meta charset=”utf-8″> <title>tab\u5207\u6362<\/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[186],"tags":[209,26],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2008"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2008"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2008\/revisions"}],"predecessor-version":[{"id":2009,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2008\/revisions\/2009"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2008"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}