{"id":397400,"date":"2021-03-23T16:11:33","date_gmt":"2021-03-23T08:11:33","guid":{"rendered":"http:\/\/4563.org\/?p=397400"},"modified":"2021-03-23T16:11:33","modified_gmt":"2021-03-23T08:11:33","slug":"%e4%bd%bf%e7%94%a8-v-for-%e5%8a%a8%e6%80%81%e6%b8%b2%e6%9f%93%e8%a1%a8%e5%8d%95%e6%97%a0%e6%95%88","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=397400","title":{"rendered":"\u4f7f\u7528 v-for \u52a8\u6001\u6e32\u67d3\u8868\u5355\u65e0\u6548 ?"},"content":{"rendered":"
\n
\n
\n

\u4f7f\u7528 v-for \u52a8\u6001\u6e32\u67d3\u8868\u5355\u65e0\u6548 ? <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : jeesk <\/span> <\/i> 2<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
    const panes = [       {title: '\u521b\u610f 1', content: ``, key: 1,index: 1},       {title: '\u521b\u610f 2', content: ``, key: 2,index: 2}     ]; <\/code><\/pre>\n
\u5f53\u6211\u5728\u4f7f\u7528\u904d\u5386\u7684\u65f6\u5019<\/p>\n
 <a-tabs v-model=\"activeKey\" hide-add type=\"editable-card\" @edit=\"onEdit\">                   <a-tab-pane v-for=\"pane in panes\" :key=\"pane.key\" :tab=\"pane.title\" :closable=\"pane.closable\">                     {{ pane.content }}                   <\/a-tab-pane>                    <a-button v-if=\"panes.length < 1\" @click=\"add\" slot=\"tabBarExtraContent\">                     <a-icon type=\"plus\"\/>                   <\/a-button>                  <\/a-tabs> <\/code><\/pre>\n
\u8fd9\u91cc\u7684 pane.content\uff0c \u5982\u4f55\u4f7f\u7528\u7ec4\u4ef6\uff1f \u4e5f\u5c31\u662f\u8bf4 panes content \u8fd9\u4e2a\u5b57\u6bb5\u5982\u4f55\u5199\uff0c \u624d\u80fd\u4f7f\u7528\u4e00\u4e9b\u7ec4\u4ef6\uff0c \u6211\u5c1d\u8bd5\u8fc7 \u4f7f\u7528<template><a-from-model-item label=\"\u521b\u610f\u540d\u5b57\"> <a-input placeholder=\"\u8bf7\u8f93\u5165\u521b\u610f\u540d\u5b57\" v-model=\"tgjhForm.names[{{index}}].campaignName\"\/><\/a-from-model-item><\/template><\/code> , \u4f46\u662f\u4f7f\u7528{{ pane.content}} \uff0c\u7684\u65f6\u5019\u76f4\u63a5\u539f\u6837\u8f93\u51fa\u4e86\u3002 \u5e76\u6ca1\u6709\u5c06 content \u7684\u7ec4\u4ef6\u6e32\u67d3\u51fa\u6765\uff0c\u800c\u4e14\u5728 content \u91cc\u9762\u4f7f\u7528{{index}} \u4e5f\u662f\u65e0\u6548\u7684\u3002 \u5404\u4f4d\u540c\u5b66\u5e2e\u5fd9\u770b\u770b\uff0c \u6211\u8981\u5982\u4f55\u4fee\u6539\u624d\u80fd\u8fbe\u5230\uff0c\u52a8\u6001\u6e32\u67d3\u7684\u6548\u679c.<\/p>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (19<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : wheelg <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 panes \u5199\u5728 data \u91cc\uff0c\u76f4\u63a5 const \u662f\u65e0\u6548\u7684                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : jeesk <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u55ef\u55ef. \u8fd9\u91cc\u7684 panes, \u6211\u4e5f\u7533\u660e\u5230 data \u91cc\u9762\u4e86\u7684. \u4f46\u5c31\u662f content \u6e32\u67d3\u4e0d\u51fa\u6765                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : no1xsyzy <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 https:\/\/stackoverflow.com\/help\/minimal-reproducible-example                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : XiaoxiaoPu <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u8fd9\u4e2a\u95ee\u9898\u5176\u5b9e\u8ddf v-for \u65e0\u5173\uff0c\u4e5f\u4e0d\u662f\u52a8\u6001\u6e32\u67d3\u7684\u95ee\u9898\u3002\u672c\u8d28\u662f\uff0c\u4f60\u60f3\u8981\u5b9e\u73b0\u628a\u4e00\u6bb5\u8fd0\u884c\u65f6\u5b57\u7b26\u4e32\uff0c\u50cf\u6a21\u677f\u4e00\u6837\u88ab\u89e3\u6790\u3002vue \u81ea\u8eab\u5e76\u4e0d\u652f\u6301\u8fd9\u6837\uff0c\u4e0d\u8fc7\u786e\u5b9e\u6709\u8fd9\u6837\u7684\u5e93\u53ef\u4ee5\u5b9e\u73b0\u6bd4\u5982\uff0cgithub.com\/alexjoverm\/v-runtime-template \u3002\u4f46\u662f\u66f4\u5efa\u8bae\u4f60\u4ece\u9700\u6c42\u51fa\u53d1\uff0c\u907f\u514d\u8fd9\u6837\u505a\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : gouflv <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u52a8\u6001\u6e32\u67d3\u6211\u9009 react                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : sjhhjx0122 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 vue \u4e5f\u662f\u652f\u6301 jsx \u7684\uff0c\u7528 jsx \u5427                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : jeesk <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @XiaoxiaoPu \u5dee\u4e0d\u591a\u5c31\u662f\u8fd9\u610f\u601d.                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : JaaaaackZheng <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 https:\/\/cn.vuejs.org\/v2\/api\/#v-html \u7528\u8fd9\u4e2a\uff1f                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : chouchoui <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u5047\u5982\u6709\u4e24\u4e2a\u5df2\u7ecf\u9884\u5148\u5b9a\u4e49\u597d\u7684\u7ec4\u4ef6\u53eb Content1 \u548c Content2\uff0c\u4e14\u5df2\u7ecf\u88ab\u5f15\u7528\u5230\u5f53\u524d\u7ec4\u4ef6\u4e2d
    import Content1 from “…Content1.vue”
    import Content2 from “…Content2.vue”<\/p>\n
    {
     components : {
     Content1,
     Content2,
     }
    }<\/p>\n
    const panes = [
     {title: ‘\u521b\u610f 1’, content: `Content1`, key: 1,index: 1},
     {title: ‘\u521b\u610f 2’, content: `Content2`, key: 2,index: 2},
    ];<\/p>\n
    <a-tab-pane v-for=”pane in panes” :key=”pane.key” :tab=”pane.title” :closable=”pane.closable”>
     <component :is=”pane.content” \/>
    <\/a-tab-pane><\/p>\n
    \u76ee\u524d\u53ea\u77e5\u9053\u8fd9\u79cd\u65b9\u5f0f                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : SilentDepth <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u5982\u679c\u7ec4\u4ef6\u6a21\u677f\u662f\u56fa\u5b9a\u7684\uff0c\u5efa\u8bae\u63d0\u524d\u5199\u6210\u7ec4\u4ef6\u6587\u4ef6\uff0c\u7136\u540e\u50cf @chouchoui #9 \u90a3\u6837\u52a8\u6001\u521b\u5efa\u7ec4\u4ef6\u5b9e\u4f8b\u3002<\/p>\n
    \u5982\u679c\u4e0d\u60f3\u8fd9\u6837\uff0c\u5efa\u8bae\u624b\u5199 render \u51fd\u6570\uff08 JS \u6216 JSX \u90fd\u53ef\u4ee5\uff09\uff0c\u518d\u901a\u8fc7 `<component is>` \u521b\u5efa\u7ec4\u4ef6\u5b9e\u4f8b\u3002<\/p>\n
    \u5982\u679c\u4e5f\u4e0d\u60f3\u8fd9\u6837\uff0c\u53ea\u80fd\u52a0\u8f7d\u5305\u542b\u8fd0\u884c\u65f6\u7f16\u8bd1\u5668\u7684 Vue\uff0c\u7136\u540e\u628a\u7ec4\u4ef6\u6a21\u677f\u5b9a\u4e49\u4e3a template \u7ec4\u88c5\u6210\u7ec4\u4ef6\u5b9a\u4e49\uff0c\u7136\u540e\u901a\u8fc7 `<component is>` \u521b\u5efa\u7ec4\u4ef6\u5b9e\u4f8b\u3002<\/p>\n
    \u5982\u679c\u8fd9\u6837\u4e5f\u4e0d\u884c\uff0c\u90a3\u53ea\u80fd\u670d\u52a1\u7aef\u6e32\u67d3\u6210 HTML \u5b57\u7b26\u4e32\uff0c\u7136\u540e\u901a\u8fc7 `v-html` \u6e32\u67d3\u4e86\u3002                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : no1xsyzy <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4e0d\u597d\u610f\u601d\uff0c\u534a\u591c\u6ca1\u770b\u6e05\u2026\u2026<\/p>\n
    1. \u751f\u6210\u4e00\u4e2a\u4e34\u65f6\u7ec4\u4ef6\uff08\u7528\u968f\u673a\u6570\u62fc\u63a5\u540d\u79f0\uff09\uff0c\u628a content \u4f5c\u4e3a template \u4f20\u5165\uff08\u5b83\u80fd\u7528\u5230\u7684\u5176\u4ed6\u7ec4\u4ef6\u4e5f\u5fc5\u987b\u5168\u5c40\u6ce8\u518c\uff09\u3002\u7136\u540e\u8c03\u7528\u8fd9\u4e2a\u4e34\u65f6\u7ec4\u4ef6
    2. Vue.compile<\/p>\n
    \u6ce8\u610f XSS                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : serene11c <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u52a8\u6001\u7ec4\u4ef6 https:\/\/cn.vuejs.org\/v2\/guide\/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6
    “`html
    <body>
     <div id=”app”>
     <div v-for=”item in array” :key=”item.id”>
     <component v-if=”item.component” :is=”item.component”><\/component>
     <span v-else>{{ item.content }}<\/span>
     <\/div>
     <\/div><\/p>\n
     <script>
     Vue.component(“tab-home”, {
     template: “<div>Home component<\/div>”
     });
     Vue.component(“tab-posts”, {
     template: “<div>Posts component<\/div>”
     });<\/p>\n
     new Vue({
     el: “#app”,
     data() {
     return {
     array: [
     { id: 1, content: “test” },
     { id: 2, component: “tab-home” },
     { id: 3, component: “tab-posts” }
     ]
     };
     }
     });
     <\/script>
     <\/body>
    “`                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : yinxianwei <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u4e3a\u4ec0\u4e48\u4e0d\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7136\u540e\u628a pane.content \u4f20\u503c\u5462                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : jeesk <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @gouflv \u8fd9\u4e2a\u6ca1\u5f97\u9009\u3002 \u7a0d\u5fae\u719f\u6089\u4e00\u70b9 vue \u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : jeesk <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @sjhhjx0122 \u8c22\u8c22\uff0c \u665a\u70b9\u6211\u53bb\u4e86\u89e3\u4e00\u4e0b\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : jeesk <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @chouchoui \u591a\u8c22\u591a\u8c22                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : jeesk <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @yinxianwei \u55ef\u55ef\u3002 \u6211\u665a\u70b9\u53bb\u4e86\u89e3\u4e00\u4e0b\u3002                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : jeesk <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 @serene11c \u770b\u6837\u5b50\u4f60\u8fd9\u4e2a\u89e3\u51b3\u65b9\u6848\u4e5f\u4e0d\u9519\u7684\u3002 \u591a\u8c22                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
     \u8cc7\u6df1\u5927\u4f6c : Summerdx404 <\/span>  <\/div>\n
     <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                 \u52a8\u6001\u7ec4\u4ef6\u6b63\u89e3 https:\/\/cn.vuejs.org\/v2\/guide\/components-dynamic-async.html<\/p>\n
    \u8fd8\u53ef\u4ee5\u52a8\u6001\u5f15\u7528: https:\/\/forum.vuejs.org\/t\/dynamic-components-with-dynamic-imports\/20703\/8                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"
    \u4f7f\u7528 v-for \u52a8\u6001\u6e32\u67d3\u8868\u5355\u65e0\u6548…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/397400"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=397400"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/397400\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=397400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=397400"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=397400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}