{"id":766,"date":"2021-08-07T08:42:28","date_gmt":"2021-08-07T00:42:28","guid":{"rendered":"https:\/\/fireinsect.top\/?p=766"},"modified":"2021-08-13T10:39:29","modified_gmt":"2021-08-13T02:39:29","slug":"vue%e5%9f%ba%e7%a1%80%e2%91%a2","status":"publish","type":"post","link":"https:\/\/fireinsect.top\/index.php\/2021\/08\/07\/vue%e5%9f%ba%e7%a1%80%e2%91%a2\/","title":{"rendered":"Vue\u57fa\u7840\u2462"},"content":{"rendered":"\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">\u8ba1\u7b97\u5c5e\u6027<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u5f53\u6211\u4eec\u4f7f\u7528\u8bf8\u5982<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;p&gt;{{ message.split('').reverse().join('') }}&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>\u4ee5\u6b64\u8bed\u6cd5\u5199\u51fa\u7684\u4ee3\u7801\u8bfb\u8d77\u6765\u5341\u5206\u8d39\u52b2\u4e14\u4e5f\u4e0d\u7b26\u5408\u9762\u5411\u5bf9\u8c61\u7684\u601d\u60f3\u3002\u6240\u4ee5\u6211\u4eec\u9009\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;p&gt;{{ reverseMessage }}&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>\u5e76\u901a\u8fc7\u8ba1\u7b97\u5c5e\u6027\u6765\u5b8c\u6210\u3002<\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-medium-font-size\">\u8ba1\u7b97\u5c5e\u6027\uff08computed\uff09<\/p>\n\n\n\n<p>\u8ba1\u7b97\u5c5e\u6027\u662f\u7ee7 data\u3001methods\u3001watch \u4e4b\u540e\u53c8\u4e00\u6210\u5458<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n  <strong>export<\/strong> <strong>default<\/strong> {\n    name: 'app',\n    <em>\/\/ \u8ba1\u7b97\u5c5e\u6027<\/em>\n    computed: {},\n  };\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u5982\u6211\u4eec\u5b8c\u6210\u4e0a\u9762\u7684\u6548\u679c\uff0c\u53ef\u4ee5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n  <strong>export<\/strong> <strong>default<\/strong> {\n      name: \"app\",\n      data:<strong>function<\/strong>(){\n          <strong>return<\/strong> {\n              message:\"\u4f18\u8bfe\u8fbe--\u5b66\u7684\u6bd4\u522b\u4eba\u597d\u4e00\u70b9\uff5e\"\n          }\n      }\n      <em>\/\/ \u8ba1\u7b97\u5c5e\u6027<\/em>\n      computed:{\n          reverseMessage:<strong>function<\/strong>(){\n              <strong>return<\/strong> this.message.split('').reverse().join('')\n          }\n      }\n  };\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u5176\u5b9e\u4e0a\u9762\u7684\u65b9\u6cd5\u4f7f\u7528methods\u4e5f\u80fd\u5b8c\u6210\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div id=\"app\"&gt;\n  &lt;p&gt;\u539f\u5b57\u7b26\u4e32\uff1a{{ message }}&lt;\/p&gt;\n  &lt;p&gt;\u53cd\u8f6c\u540e\u7684\u5b57\u7b26\u4e32\uff1a{{ reverseMessage() }}&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"> methods: {\n      reverseMessage: <strong>function<\/strong> () {\n        <strong>return<\/strong> this.message.split('').reverse().join('');\n      },\n    },<\/code><\/pre>\n\n\n\n<p>\u770b\u8d77\u6765\u6ca1\u6709\u4ec0\u4e48\u533a\u522b\uff0c\u65e0\u975e\u662f  {{  }} \u5185\u7565\u6709\u4e0d\u540c\u7f62\u4e86\u3002<\/p>\n\n\n\n<p>\u90a3\u4e48\u4e3a\u4ec0\u4e48\u8981\u7528\u8ba1\u7b97\u5c5e\u6027\u5462\uff1f<\/p>\n\n\n\n<p>\u56e0\u4e3a\u8ba1\u7b97\u5c5e\u6027\u6709<strong>\u4f9d\u8d56<\/strong>\u548c<strong>\u7f13\u5b58<\/strong>\u4e24\u4e2a\u6027\u8d28<\/p>\n\n\n\n<p>\u4f9d\u8d56\uff1a\u6848\u4f8b\u4e2d \u5c31\u662f\u8ba1\u7b97\u5c5e\u6027\u7684\u4f9d\u8d56 \u7f13\u5b58\uff1a\u4e0a\u4e00\u6b21\u8ba1\u7b97\u5f97\u5230\u7684\u503c<br>\u7ed3\u5408\u4e0a\u9762\u7684\u6848\u4f8b\u89e3\u91ca\u4e00\u4e0b\uff1a<\/p>\n\n\n\n<p> <br>\u8ba1\u7b97\u5c5e\u6027\uff1a<\/p>\n\n\n\n<ul class=\"list1 wp-block-list\"><li>\u5f53 <code>message<\/code> \u53d1\u751f\u6539\u53d8\uff08\u5373\u4f9d\u8d56\u53d8\u5316\uff09\uff0c \u8ba1\u7b97\u5c5e\u6027\u4f1a\u91cd\u65b0\u8ba1\u7b97\uff0c\u7136\u540e\u8fd4\u56de\u8ba1\u7b97\u7ed3\u679c\uff1b<\/li><li><code>message<\/code> \u4e0d\u53d1\u751f\u6539\u53d8\uff08\u5373\u4f9d\u8d56\u4e0d\u53d8\u5316\uff09\uff0c \u8ba1\u7b97\u5c5e\u6027\u4f1a\u8fd4\u56de\u7f13\u5b58\u7684\u503c\uff0c\u800c\u4e0d\u4f1a\u91cd\u65b0\u8ba1\u7b97\u3002<\/li><\/ul>\n\n\n\n<p> <\/p>\n\n\n\n<p>\u65b9\u6cd5\uff1a<br>\u6bcf\u6b21\u8bbf\u95ee\u7684\u65f6\u5019\uff0c\u90fd\u4f1a\u53bb\u6267\u884c\u65b9\u6cd5\u4f53\u91cc\u7684\u903b\u8f91\uff0c\u7136\u540e\u8fd4\u56de\u7ed3\u679c\u3002<\/p>\n\n\n\n<p> <br>\u603b\u7ed3\uff1a\u8ba1\u7b97\u5c5e\u6027\u907f\u514d\u4e86\u4e0d\u5fc5\u8981\u7684\u4ee3\u7801\u6267\u884c\uff0c\u6027\u80fd\u66f4\u4f18<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">\u52a8\u6001class<\/p>\n\n\n\n<p>\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 v-bind \u6765\u52a8\u6001\u7ed1\u5b9aclass\uff0c\u4ee5\u6b64\u6765\u5b8c\u6210\u52a8\u6001\u6837\u5f0f\u5982<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div class=\"base\" v-bind:class=\"{ active: isActive }\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.active {\n  border: 1px solid green;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">data:<strong>function<\/strong>(){\n    <strong>return<\/strong> {\n        isActive:false\n    }\n}<\/code><\/pre>\n\n\n\n<p>\u5176\u4e2d active \u8868\u793a\u7c7b\u540d\uff0c\u800c isActive \u8868\u793a\u4e00\u4e2a\u5e03\u5c14\u7c7b\u578b\u7684\u503c\u4ee5\u6b64\u6765\u8868\u793a\u662f\u5426\u542f\u7528\u6b64\u7c7b\u3002<\/p>\n\n\n\n<p>\u5176\u4e2d\uff0c\u7c7b\u540d\u4e66\u5199\u4e5f\u6709\u89c4\u5219\uff0c\u6bd4\u5982\u7c7b\u540d\u4e3a base-active \u65f6\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528 \u5355\u5f15\u53f7\u6216\u8005\u53cc\u5f15\u53f7\u6765\u5305\u88f9\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div v-bind:class=\"{ 'base-active': isActive }\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p> <\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-medium-font-size\">\u5f15\u53f7\u89c4\u5219<\/p>\n\n\n\n<p>\u5982\u679c\u5927\u62ec\u53f7\u7528\u53cc\u5f15\u53f7\u5f15\u8d77\u6765\uff0c\u90a3\u8fb9\u7c7b\u540d\u5c31\u8981\u7528\u5355\u5f15\u53f7\u5f15\u8d77\u6765\uff0c\u53cd\u4e4b\u4f9d\u7136\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><em>&lt;!-- \u5916\u53cc\u5185\u5355 --&gt;<\/em>\n&lt;div v-bind:class=\"{ 'base-active': isActive }\"&gt;&lt;\/div&gt;\n<em>&lt;!-- \u5916\u5355\u5185\u53cc --&gt;<\/em>\n&lt;div v-bind:class='{ \"base-active\": isActive }'&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>\u52a8\u6001\u6837\u5f0f\u7ed1\u5b9a\u4e5f\u53ef\u4ee5\u7ed1\u5b9a\u591a\u4e2a\u7c7b\u540d\uff0c\u53ea\u8981\u9017\u53f7\u95f4\u9694\u5c31\u884c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div v-bind:class='{ \"base-active\": isActive,\"base\":true}'&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>\u9664\u4e86\u4e0a\u9762\u7684\u7ed1\u5b9a\u5199\u6cd5\uff0c\u6837\u5f0f\u7ed1\u5b9a\u4e5f\u652f\u6301\u4e09\u5143\u8868\u8fbe\u5f0f\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div\n  v-bind:class=\"[isChoosed ? 'redbg' : 'bluebg']\"\n&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">\u52a8\u6001style<\/p>\n\n\n\n<p>\u9664\u4e86\u53ef\u4ee5\u6dfb\u52a0\u52a8\u6001\u7684\u5916\u90e8\u6837\u5f0f\uff0cvue\u4e5f\u652f\u6301\u6dfb\u52a0\u52a8\u6001\u884c\u5185\u6837\u5f0f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div :style=\"flexStyle\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">data:<strong>function<\/strong>(){\n    <strong>return<\/strong> {\n        flexStyle: {\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            flexWrap: 'no-wrap',\n        },\n    }\n}<\/code><\/pre>\n\n\n\n<p>\u540c\u65f6\uff0c\u53ef\u4ee5\u901a\u8fc7\u6dfb\u52a0\u53d8\u91cf\u6765\u8fbe\u6210\u52a8\u6001\u6548\u679c\uff0c<span class=\"has-inline-color has-vivid-red-color\">\u4f46\u5168\u5c40\u53d8\u91cf\u5185\u4e0d\u80fd\u5f15\u7528\u5168\u5c40\u53d8\u91cf<\/span>\u3002<\/p>\n\n\n\n<p>\u548c\u52a8\u6001class\u4e00\u6837\uff0c\u5176\u4e5f\u53ef\u4ee5\u6dfb\u52a0\u6570\u7ec4\u548c\u4e09\u5143\u8868\u8fbe\u5f0f<\/p>\n\n\n\n<p>\u5982<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><strong>data<\/strong>() {\n  <strong>return<\/strong> {\n    fontStyle: { color: 'red', fontSize: '33px' },\n    boxStyle:{width: '200px', height: '200px', border: `1px solid black`}\n  };\n},<\/code><\/pre>\n\n\n\n<p>\u53ef\u4ee5\u7528\u6570\u7ec4\u8868\u8fbe<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div :style=\"[fontStyle,boxStyle]\"&gt;\u8fd9\u91cc\u662f\u6587\u5b57&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4e09\u5143\u8868\u8fbe\u5f0f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div :style=\"[fontStyle, isActive ? boxStyle : colorBox]\"&gt;\u8fd9\u91cc\u662f\u6587\u5b57&lt;\/div&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u8ba1\u7b97\u5c5e\u6027<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-766","post","type-post","status-publish","format-standard","hentry","category-5"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/766"}],"collection":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/comments?post=766"}],"version-history":[{"count":7,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/766\/revisions"}],"predecessor-version":[{"id":774,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/766\/revisions\/774"}],"wp:attachment":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/media?parent=766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/categories?post=766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/tags?post=766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}