问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何将 class="active" 放入 vuejs for 循环中的第一个元素

社区维基
1
新手上路，请多包涵

我正在尝试学习 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"
                }
            ]
        }
    }
}

帮帮我。

原文由 Nitish Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvuejs2vue.js
阅读 775
2 个回答
得票最新
社区维基
1
✓ 已被采纳
 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');

 .active {
  background-color: red;
}

 <!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>

上面是一个片段，展示了您的问题的解决方案。这是它的概要：

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

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

v-for 指令有第二个参数给你项目的索引。

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

由于您想要第一项上的 active 类，您可以使用表达式测试 index 是否为 0 并将其绑定到类属性。

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

原文由 Wing 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

最简单的解决方案是检查每个元素是否 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')]"

原文由 Brane 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题