{"id":962,"date":"2022-03-03T14:42:11","date_gmt":"2022-03-03T06:42:11","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=962"},"modified":"2022-03-16T15:13:20","modified_gmt":"2022-03-16T07:13:20","slug":"vue-v-if%e4%b8%8ev-show%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=962","title":{"rendered":"Vue v-if\u4e0ev-show(\u5b66\u4e60\u7b14\u8bb0)"},"content":{"rendered":"\n<p><strong>v-if vs v-show<\/strong><\/p>\n\n\n\n<p>v-if \u662f\u201c\u771f\u6b63\u7684\u201d\u6761\u4ef6\u6e32\u67d3\uff0c\u56e0\u4e3a\u5b83\u4f1a\u786e\u4fdd\u5728\u5207\u6362\u8fc7\u7a0b\u4e2d\u6761\u4ef6\u5757\u5185\u7684\u4e8b\u4ef6\u76d1\u542c\u5668\u548c\u5b50\u7ec4\u4ef6\u9002\u5f53\u5730\u88ab\u9500\u6bc1\u548c\u91cd\u5efa\u3002<\/p>\n\n\n\n<p>v-if \u4e5f\u662f\u60f0\u6027\u7684\uff1a\u5982\u679c\u5728\u521d\u59cb\u6e32\u67d3\u65f6\u6761\u4ef6\u4e3a\u5047\uff0c\u5219\u4ec0\u4e48\u4e5f\u4e0d\u505a\u2014\u2014\u76f4\u5230\u6761\u4ef6\u7b2c\u4e00\u6b21\u53d8\u4e3a\u771f\u65f6\uff0c\u624d\u4f1a\u5f00\u59cb\u6e32\u67d3\u6761\u4ef6\u5757\u3002<\/p>\n\n\n\n<p>\u76f8\u6bd4\u4e4b\u4e0b\uff0c v-show \u5c31\u7b80\u5355\u5f97\u591a\u2014\u2014\u4e0d\u7ba1\u521d\u59cb\u6761\u4ef6\u662f\u4ec0\u4e48\uff0c\u5143\u7d20\u603b\u662f\u4f1a\u88ab\u6e32\u67d3\uff0c\u5e76\u4e14\u53ea\u662f\u7b80\u5355\u5730\u57fa\u4e8e CSS \u8fdb\u884c\u5207\u6362\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u6765\u8bf4\uff0c v-if \u6709\u66f4\u9ad8\u7684\u5207\u6362\u5f00\u9500\uff0c\u800c v-show \u6709\u66f4\u9ad8\u7684\u521d\u59cb\u6e32\u67d3\u5f00\u9500\u3002<\/p>\n\n\n\n<p>\u56e0\u6b64\uff0c\u5982\u679c\u9700\u8981\u975e\u5e38\u9891\u7e41\u5730\u5207\u6362\uff0c\u5219\u4f7f\u7528 v-show \u8f83\u597d\uff1b<\/p>\n\n\n\n<p>\u5982\u679c\u5728\u8fd0\u884c\u65f6\u6761\u4ef6\u4e0d\u592a\u53ef\u80fd\u6539\u53d8\uff0c\u5219\u4f7f\u7528 v-if \u8f83\u597d\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n  &lt;div id=\"app\">\n    &lt;div v-if=\"isIf\">\n      if\n    &lt;\/div>\n    &lt;div v-show=\"ifShow\">\n      show\n    &lt;\/div>\n    &lt;button @click=\"toggleShow\">toggle&lt;\/button>\n  &lt;\/div>\n&lt;\/template>\n \n&lt;script>\n  export default {\n    name: 'app',\n    data() {\n      return {\n        isIf : true,\n        ifShow : true,\n        loginType : \"username\"\n      }\n    },\n    methods: {\n      toggleShow : function(){\n        this.ifShow = this.ifShow ? false : true;\n        this.isIf = this.isIf ? false : true;\n      }\n    }\n  }\n&lt;\/script><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"404\" height=\"190\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/03\/1.png\" alt=\"\" class=\"wp-image-963\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/03\/1.png 404w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/03\/1-300x141.png 300w\" sizes=\"(max-width: 404px) 100vw, 404px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"433\" height=\"176\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/03\/2.png\" alt=\"\" class=\"wp-image-964\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/03\/2.png 433w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/03\/2-300x122.png 300w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>\u5bf9\u6bd4\u53ef\u4ee5\u770b\u51fav-if\u76f4\u63a5\u4ece\u4ee3\u7801\u4e2d\u5220\u9664\u4e86\uff0cv-show\u53ea\u662f\u901a\u8fc7display\u6765\u5207\u6362\u72b6\u6001\uff0c\u56e0\u6b64\u5efa\u8bae\u9891\u7e41\u5207\u6362\u7684\u8bdd\u7528v-show\u6bd4\u8f83\u597d<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>v-if vs v-show v-if \u662f\u201c\u771f\u6b63\u7684\u201d\u6761\u4ef6\u6e32\u67d3\uff0c\u56e0\u4e3a\u5b83\u4f1a\u786e\u4fdd\u5728\u5207\u6362\u8fc7\u7a0b\u4e2d\u6761\u4ef6\u5757\u5185\u7684\u4e8b\u4ef6\u76d1\u542c\u5668\u548c\u5b50 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,1],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/962"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=962"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/962\/revisions"}],"predecessor-version":[{"id":965,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/962\/revisions\/965"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=962"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}