{"id":756,"date":"2021-08-06T20:24:45","date_gmt":"2021-08-06T12:24:45","guid":{"rendered":"https:\/\/fireinsect.top\/?p=756"},"modified":"2021-08-07T08:15:50","modified_gmt":"2021-08-07T00:15:50","slug":"vue%e5%9f%ba%e7%a1%80%e2%91%a1","status":"publish","type":"post","link":"https:\/\/fireinsect.top\/index.php\/2021\/08\/06\/vue%e5%9f%ba%e7%a1%80%e2%91%a1\/","title":{"rendered":"Vue\u57fa\u7840\u2461"},"content":{"rendered":"\n

\u52a8\u6001\u7ed1\u5b9a v-bind<\/p>\n\n\n\n

\u5728\u5f88\u591a\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u9700\u8981\u52a8\u6001\u4fee\u6539\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5982 img \u6807\u7b7e\u7684 alt \u5c5e\u6027\uff0c\u5f80\u5f80\u5c06\u5c5e\u6027\u503c\u56fa\u5b9a\u662f\u4e0d\u884c\u7684\uff0c\u6b64\u65f6\u6211\u4eec\u5c31\u9700\u8981 v-bind \u6765\u52a8\u6001\u7ed1\u5b9a\u3002<\/p>\n\n\n\n\n\n\n\n

<template>\n  <div id=\"app\">\n    <img src=\"#\" v-bind:alt=\"imgText\" \/>\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n
<script>\nexport<\/strong> default<\/strong> {\n    name: \"app\",\n    \/\/ \u6570\u636e<\/em>\n    data<\/strong>() {\n        return<\/strong> {\n            imgText:'\u5468\u6770\u4f26\u6f14\u5531\u4f1a\u56fe\u7247'\n        };\n    }\n};\n<\/script><\/code><\/pre>\n\n\n\n
\u8fd9\u91cc\u53ef\u4ee5\u770b\u51fa\uff0c\u6211\u4eec\u7ed9 img\u6807\u7b7e\u7684 alt\u5c5e\u6027\u52a8\u6001\u7ed1\u5b9a\u4e86 imgText\u53d8\u91cf\u4ee5\u6b64\u5b9e\u73b0\u52a8\u6001\u53d8\u5316\u3002<\/p>\n\n\n\n
\u5f53\u7136\u4e5f\u53ef\u4ee5\u5199\u6210<\/p>\n\n\n\n
\n\n<div id=\"app\">\n    <img src=\"#\" :alt=\"imgText\" \/>\n  <\/div>\n\n<\/code><\/pre>\n\n\n\n
\u5176\u4e2d :alt \u662f v-bind:alt  \u7684\u7b80\u5199\uff0c\u5373 v-bind: \u7684\u7b80\u5199\u4e3a :<\/p>\n\n\n\n
<\/div>\n\n\n\n
\u6a21\u677f\u4e2d\u7684\u8fd0\u7b97\u7b26<\/p>\n\n\n\n
\u5dee\u503c\u8868\u8fbe\u5f0f\u4e0d\u4ec5\u53ef\u4ee5\u8868\u793a\u4e00\u4e2a\u53d8\u91cf\uff0c\u4e5f\u53ef\u4ee5\u8fdb\u884c\u7b80\u5355\u8fd0\u7b97\u3002<\/p>\n\n\n\n
<ul>\n      <li>{{ goods[0].index + 1 }}---{{ goods[0].name }}<\/li>\n      <li>{{ goods[1].index + 1 }}---{{ goods[1].name }}<\/li>\n      <li>{{ goods[2].index + 1 }}---{{ goods[2].name }}<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
 data<\/strong>() {\n        return<\/strong> {\n            goods:[\n                {\n                    index:0,\n                    name:\"\u626b\u5730\u673a\u5668\u4eba\"\n                },\n                {\n                    index:1,\n                    name:\"\u534e\u4e3a\u624b\u673a\"\n                },\n                {\n                    index:2,\n                    name:\"\u6234\u5c14\u7b14\u8bb0\u672c\"\n                }\n            ]\n        };\n    }<\/code><\/pre>\n\n\n\n
\u9664\u4e86\u7b80\u5355\u7684\u52a0\u51cf\u4e58\u9664\uff0c\u5dee\u503c\u8868\u8fbe\u5f0f\u4e5f\u652f\u6301\u4e09\u5143\u8fd0\u7b97\u7b26\uff1a<\/p>\n\n\n\n
<div id=\"app\">\n    <p>{{ flag?'\u4f60\u5df2\u7ecf\u901a\u8fc7\u4e86\u8003\u8bd5:'\u4f60\u8fd8\u6ca1\u6709\u901a\u8fc7\u8003\u8bd5' }}<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
data<\/strong>() {\n        return<\/strong> {\n            flag:true\n        };\n    }<\/code><\/pre>\n\n\n\n
\u8fd9\u91cc\u5728 p \u6807\u7b7e\u4e0a\u6dfb\u52a0\u4e86\u4e09\u5143\u8fd0\u7b97\u7b26\uff0c\u5e76\u4e0e\u4e4b\u540e\u7684\u53d8\u91cf\u8fde\u63a5\u3002<\/p>\n\n\n\n
<\/div>\n\n\n\n
\u9664\u4e86\u8fd0\u7b97\u7b26\uff0c\u6a21\u677f\u4e2d\u4e5f\u53ef\u4ee5\u5199\u5165js\u5185\u7f6e\u65b9\u6cd5<\/p>\n\n\n\n
<div id=\"app\">\n    <p>{{ message.split('').reverse().join('') }}<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
\u8fd9\u4e2a\u65b9\u6cd5\u5373\u5c06message\u53d8\u91cf\u5185\u5bb9\u98a0\u5012\u663e\u793a<\/p>\n\n\n\n
\u6ce8\u610f\uff1a\u4e0d\u8981\u5728\u6a21\u677f\u4e2d\u6ee5\u7528\u8868\u8fbe\u5f0f\uff0c\u5c24\u5176\u662fjs\u5185\u7f6e\u65b9\u6cd5\uff0c\u4e0d\u7136\u4f1a\u663e\u5f97html\u4ee3\u7801\u5341\u5206\u81c3\u80bf<\/p>\n\n\n\n
<\/div>\n\n\n\n
v-if,v-else,v-else-if<\/p>\n\n\n\n
<p v-if=\"isShow\">{{ message }}<\/p><\/code><\/pre>\n\n\n\n
\u8fd9\u8868\u793a\u53ea\u6709\u5f53isShow\u4e3atrue\u65f6\uff0c\u8fd9\u4e2a\u6807\u7b7e\u624d\u4f1a\u663e\u793a\u3002<\/p>\n\n\n\n
\u800cv-else\u4e0ev-else-if \u4e0ejs\u4e2d\u7684\u7528\u9014\u4e00\u6837\uff0c\u4e3a\u4e86\u89c4\u8303 if \u7684\u8303\u56f4\u3002<\/p>\n\n\n\n
\u5f53\u7136\u8fd9\u91cc\u8981\u6ce8\u610f\u548cjs\u4e00\u6837\u8fd9\u91cc\u4f7f\u7528\u7b49\u4e8e\u5224\u65ad\u65f6\uff0c\u9700\u8981\u4f7f\u7528\u4e09\u4e2a\u2018=\u2019<\/strong><\/em>\u5982\uff1a<\/p>\n\n\n\n
<p v-if=\"questions[0].type==='PICK'\">{{ questions[0].content }}<\/p><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
v-show<\/p>\n\n\n\n
v-show\u7684\u7528\u6cd5\u548cv-if\u662f\u4e00\u6837\u7684\uff0c\u5373\u5f53\u6761\u4ef6\u6ee1\u8db3\uff0c\u5c31\u4f1a\u663e\u793a\u6807\u7b7e\u4e2d\u7684\u5185\u5bb9\uff0c\u533a\u522b\u5c31\u662f<\/p>\n\n\n\n
  • v-show\u6307\u4ee4\u53ea\u662f\u5c06\u6807\u7b7e\u7684display\u5c5e\u6027\u8bbe\u7f6e\u4e3anone<\/li>
  • v-if\u6307\u4ee4\uff0c\u5982\u679c\u4e0d\u6ee1\u8db3\u6761\u4ef6\uff0c\u5219\u6b64\u6807\u7b7e\u5728dom\u4e2d\u6839\u672c\u4e0d\u5b58\u5728\u3002 <\/li><\/ul>\n\n\n\n
     <\/p>\n\n\n\n
    \u90a3\u4e48\u5982\u4f55\u9009\u62e9\u5462\uff1f<\/em><\/strong>
    \u5f53\u6807\u7b7e\u51fa\u73b0\u4ee5\u540e\u5c31\u4e0d\u4f1a\u518d\u6b21\u6d88\u5931\uff0c\u6216\u8005\u6d88\u5931\/\u51fa\u73b0\u7684\u9891\u7387\u4e0d\u9ad8\uff0c\u5c31\u7528 v-if\u3002 \u5f53\u6807\u7b7e\u4f1a\u88ab\u9891\u7e41\u7684\u5207\u6362\uff0c\u4ece\u6d88\u5931\u5230\u663e\u793a\uff0c\u90a3\u4e48\u5c31\u7528v-show\u3002
    \u4e0d\u8fc7\u5f00\u53d1\u4e2d\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u90fd\u4f1a\u7528v-if\u3002\u53ea\u4e0d\u8fc7\u6709\u4e9b\u4eba\u6bd4\u8f83\u4e25\u8c28\uff0c\u4f1a\u8003\u8651\u5207\u6362\u5f00\u9500\u548c\u6e32\u67d3\u5f00\u9500\u3002<\/p>\n\n\n\n
     <\/p>\n\n\n\n
    \u5217\u8868\u6e32\u67d3\uff08v-for\uff09<\/p>\n\n\n\n
    v-for\u548c js \u4e2d\u7684for\u5faa\u73af\u5dee\u4e0d\u591a\u3002<\/p>\n\n\n\n
    <div id=\"app\">\n    <ul>\n        <li v-for=\"item in 5\" :key=\"item\">{{ item }}<\/li>\n    <\/ul>\n<\/div><\/code><\/pre>\n\n\n\n
    \u5373\u4ece1\u5f00\u59cb\u5faa\u73af\u904d\u5386\u52305\uff0c\u6700\u7ec8\u5f97\u52305\u4e2a li\u6807\u7b7e<\/p>\n\n\n\n
    \u5faa\u73af\u6e32\u67d3\u6570\u7ec4<\/p>\n\n\n\n
    <ul>\n    <li v-for=\"(item,index) in nameList\" :key=\"index\">{{ item }}<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
    <script>\nexport<\/strong> default<\/strong> {\n    name: \"app\",\n    \/\/ \u6570\u636e<\/em>\n    data<\/strong>() {\n        return<\/strong> {\n            nameList:[\"\u5f20\u6dee\u68ee\",\"\u5468\u9038\u4f9d\",\"\u6881\u6f84\u9759\",\"\u5b81\u53e4\u8584\",\"\u4e18\u7ea6\u9756\"]\n        };\n    }\n};\n<\/script><\/code><\/pre>\n\n\n\n
    \u5176\u4e2d{item,index} \u7b2c\u4e00\u4e2a\u4e3a\u5bf9\u8c61\uff0c\u7b2c\u4e8c\u4e2a\u4e3a\u4f4d\u7f6e\u3002<\/p>\n\n\n\n
    \u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u5faa\u73af\u6e32\u67d3\u6570\u7ec4\u5305\u542b\u4e09\u4e2a\u503c<\/p>\n\n\n\n
    <!-- \n    value\uff1a\u5bf9\u8c61\u4e2d\u6bcf\u4e00\u9879\u7684\u503c\n    key\uff1a\u5bf9\u8c61\u4e2d\u6bcf\u4e00\u9879\u7684\u952e\n    index\uff1a\u7d22\u5f15\n --><\/em>\n<li v-for=\"(value,key,index)\" :key=\"index\"><\/li><\/code><\/pre>\n\n\n\n
     data<\/strong>() {\n        return<\/strong> {\n            book:{\n                bookName:'\u6307\u73af\u738b',\n                author:'JK \u7f57\u7433'\n            }\n        };\n    }<\/code><\/pre>\n\n\n\n
    \u5bf9\u4e8e\u4ee5\u4e0a\u6570\u7ec4\uff0cvalue\u4ee3\u8868\u5982\u201c\u6307\u73af\u738b\u201d\u7684\u503c\uff0ckey\u4ee3\u8868\u5982\u201cbookName\u201d,index\u8868\u793a\u4f4d\u7f6e\u3001<\/p>\n\n\n\n
    \u5faa\u73af\u6e32\u67d3\u6570\u7ec4\u4e5f\u53ef\u4ee5\u6e32\u67d3\u5bf9\u8c61\u6570\u7ec4\u3002<\/p>\n\n\n\n
     <\/p>\n\n\n\n
    \u53ef\u4ee5\u770b\u89c1\uff0c\u5faa\u73af\u6e32\u67d3\u65f6\uff0c\u6211\u4eec\u4f1a\u52a0\u4e0a :key=””<\/p>\n\n\n\n
    \u8fd9\u662fVue\u5de5\u7a0b\u4e3a\u4e86\u4fdd\u8bc1\u6bcf\u4e00\u4e2aitem\u7684\u552f\u4e00\u6027\uff0c\u9700\u8981\u4e00\u4e2a\u552f\u4e00\u7684key\uff0c\u5426\u5219\u4f1a\u62a5\u9519\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u52a8\u6001\u7ed1\u5b9a v-bind \u5728\u5f88\u591a\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u9700\u8981\u52a8\u6001\u4fee\u6539\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5982 img \u6807\u7b7e\u7684 alt \u5c5e\u6027\uff0c\u5f80\u5f80\u5c06\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-756","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\/756"}],"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=756"}],"version-history":[{"count":7,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/756\/revisions"}],"predecessor-version":[{"id":764,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/756\/revisions\/764"}],"wp:attachment":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/media?parent=756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/categories?post=756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/tags?post=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}