Question

给出组件数据中的对象集合：

        string connString = "DefaultEndpointsProtocol=https;AccountName=yourAccountName;AccountKey=yourAccountKey;EndpointSuffix=core.windows.net";

        BlobHttpHeaders blobHttpHeaders = new BlobHttpHeaders()
        {
            ContentType = "video/mp4"
        };

        BlobClient blobClient = new BlobClient(connString, "container1", "SampleVideo.mp4");
        blobClient.Upload("E:\\SampleVideo.mp4", blobHttpHeaders);

...是否可以渲染这样的结构...

data: function () {
  return [
    { id: 1, name: "foo", br: false },
    { id: 1, name: "bar", br: true },
    { id: 1, name: "baz", br: false }
  ]
}

简而言之，我需要有条件地以与列表中项目相同的级别呈现另一个div。如果重要或有帮助，列表中的各个项目也是组成部分。我知道如何设置其余数据和属性-只是在我需要完成的列表中呈现了其他HTML。

我想避免在列表中创建另一个项目以及代表中断的其他组件。无需为简单的HTML div添加其他Vue对象的开销。此列表可能包含> 100个项目和“中断”，并且可以快速添加。

Answer 1

是的。您应该像这样遍历所有项目：

<template v-for="item in items">
  <div :id="item.id"> 
    {{ item.name }}
  </div>
  <div class="break" v-if="item.br">

  </div>
</template>

Answer 2

对于可选的div，您可以使用常规的v-for和常规的v-if来实现

<html>
<head>
  <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
  </script>
  </head>
  <body>
     <div id="app">
         <div v-for="item in items">
             <div :id="item.id">{{item.name}}</div>
             <div  v-if="item.br" class="break">
        </div>
     </div>
     <script type = "text/javascript">
        var vue_det = new Vue({
        el: '#app',
        data: {
            items: [
            { id: 1, name: "foo", br: false },
            { id: 2, name: "bar", br: true },
            { id: 3, name: "baz", br: false }
          ]}
       });
      </script>
      </body>
  </html>

您不必担心100 div左右，因此，像Vue这样的库可有效管理数千个组件

Answer 3

如果br为真，这应该创建一个类：

    <template>
      <div id="app">
        <ul>
          <li v-for="(aData, index) in data" :key="index">
            <span :id="aData.id" :class="{ '' : !aData.br, 'break' : aData.br }">{{aData.name}}</span>
          </li>
        </ul>
      </div>
    </template>

  <script>
    export default {
      name: "App",
      data() {
        return {
          data: [
            { id: 1, name: "foo", br: false },
            { id: 2, name: "bar", br: true },
            { id: 3, name: "baz", br: false }
          ]
        };
      }
    };
  </script>

这是生成的：

  <div id="app">
   <ul>
    <li><span id="1" class="">foo</span></li>
    <li><span id="2" class="break">bar</span></li>
    <li><span id="3" class="">baz</span></li>
   </ul>
  </div>

在这里您可以找到预览您的问题的实时回购！ VueJS - Link

在使用v-for的VueJS中，这种结构可行吗？

3 个答案: