vue.js 有什么方法可以显示选定数量的列表项，而不必为每个项添加条件吗？

0tdrvxhp 于 2022-12-30 发布在 Vue.js

关注(0)|答案(3)|浏览(213)

假设我有一个清单。

<div>
   <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
  </ul>
</div>

我只希望Item 1之后的每一项在用户单击按钮时都可见。我可以通过创建一个名为showItem的布尔值，将其设置为false，然后在一个方法中创建一个单击事件将其设置为true来轻松实现这一点。

<div @click="showItemBtn">
   <ul>
      <li>Item1</li>
      <li v-if="showItem">Item2</li>
      <li v-if="showItem">Item3</li>
  </ul>
</div>

method: {
   showItemBtn() {
      this.showItem = true
     }
   }

但是，是否有更简洁的方法来实现这一点，这样我就不必向Item 1之后的每一项添加v-if语句？

vue.js

来源：https://stackoverflow.com/questions/74948374/any-way-to-show-a-selected-number-of-list-items-without-having-to-add-a-conditio

3条答案

按热度按时间

ni65a41a1#

我会添加一个v-for逻辑到items中，它带有一个响应bool值，并在模板中添加了click逻辑。这里你不需要在Vue逻辑中使用click方法。

new Vue({
  el: "#app",
  data: {
    showItem: false,
    // You can add your list items here
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div @click="showItem = true">
    <ul>
      <li>Item1</li>
      <li v-for="index in 3" v-if="showItem">Item{{ index + 1 }}</li>
    </ul>
  </div>
</div>

赞(0）回复(0）举报 2022-12-30

5cg8jx4n2#

您可以对项目使用v-for：

new Vue({
  el: "#demo",
  data() {
    return {
      items: ['Item1', 'Item2', 'Item3'],
      showItem: false
    }
  },
  methods: {
    showItemBtn() {
      this.showItem = true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div @click="showItemBtn">
    <ul>
      <li>Item</li>
      <div v-for="item in items">
        <li v-if="showItem">{{ item }}</li>
      </div>
    </ul>
  </div>
</div>

赞(0）回复(0）举报 2022-12-30

41zrol4v3#

将这些元素 Package 到<template>元素中，并仅对<template>使用一次v-if指令。

new Vue({
  el: "#app",
  data() {
    return {
      showItem: false,
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div @click="showItem = !showItem">
      <ul>
        <li>Item1</li>
        <template v-if="showItem">
          <li>Item2</li>
          <li>Item3</li>
        </template>
      </ul>
  </div>
</div>

如果循环是可能的，你也可以尝试下面的方法。我用键作为一个唯一的id来演示，你可以使用任何唯一的。
一个二个一个一个

赞(0）回复(0）举报 2022-12-30

我来回答

vue.js 有什么方法可以显示选定数量的列表项，而不必为每个项添加条件吗？

3条答案

相关问题

热门标签

最新问答