Question

我试图学习vue.js.我添加了元素列表，我想只将class="active"添加到for循环中的第一个元素。以下是我的代码：

<div class="carousel-inner text-center " role="listbox">
    <div class="item" v-for="sliderContent in sliderContents">
        <h1>{{ sliderContent.title }}</h1>
        <p v-html="sliderContent.paragraph"></p>
    </div>
</div>

所以第一个元素应该是这样的：

<div class="item active">
    <h1>WELCOME TO CANVAS</h1>
    <p>Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas</p>
</div>

我能够获取数据，因此一切正常。

以下是我的脚本代码：

<script>
export default{
    data() {
        return {
            sliderContents: [
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                },
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                },
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                },
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                }
            ]
        }
    }
}

帮帮我。

Answer 1

＆＃13;

const TextComponent = {
  template: `
    <p>{{ text }}</p>
  `,
  
  props: ['text'],
};

new Vue({
  components: {
    TextComponent,
  },
  
  template: `
    <div>
      <text-component
        v-for="(item, index) in items"
        :class="{ 'active': index === 0 }"
        :text="item.text">
      </text-component>
    </div>
  `,
  
  data: {
    items: [
      { text: 'Foo' },
      { text: 'Bar' },
      { text: 'Baz' },
    ],
  },
}).$mount('#app');

＆＃13;

.active {
  background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>

＆＃13;

以上是演示解决问题的代码段。以下是它的概述：

在v-for块内，我们可以完全访问父作用域属性。 v-for还支持当前项索引的可选第二个参数。

- https://vuejs.org/v2/guide/list.html#Basic-Usage

v-for指令有第二个参数，为您提供项目的索引。

v-for="(item, index) in items"

由于您希望第一项上有active类，因此如果index为0，则可以使用表达式测试并将其绑定到类属性。

:class="{ 'active': index === 0 }"

Answer 2

最简单的解决方案是检查每个元素是否index等于0，然后设置active类（或所需的类）。这是类定义的代码：

:class="{ 'active': index === 0 }"

以下是制作Bootstrap Tabs的有效示例：

<ul class="nav nav-tabs tab-nav-right" role="tablist">
    <li role="presentation" :class="{ 'active': index === 0 }" v-for="(value, index) in some_array" v-bind:key="index">
        {{some_array[index]}}
    </li>
</ul>

此外，如果您有多个课程，可以像这样混合使用它们：

:class="['tab-pane fade', (index === 0 ? 'active in' : 'something_else')]"

Answer 3

要将活动类置于循环中的第一个元素，基本上，您正在尝试通过 VuejS 以编程方式控制该类。

VueJS 允许你将锚标签的类（比如，但它甚至可以是 li 标签）直接绑定到 li 元素的索引，这样当绑定到索引的 vuejs 变量发生变化时，类也会发生变化.查看这两个链接了解更多详情

这是解决方案的关键

:class="{current:i == current}

在下面的小提琴和另一篇博文中提供，以博客格式解释了如何在 vuejs 中动态控制 li 元素的类

https://jsfiddle.net/Herteby/kpkcfcdw/

https://stackoverblow.wordpress.com/2021/04/03/how-modern-javascript-makes-click-simulation/

如何把class =＆＃34; active＆＃34;到vuejs for循环中的第一个元素

3 个答案: