css动画在引导卡中不起作用，vue渲染

Question

我已经构建了引导卡，用于解释我的项目中的定价。当屏幕尺寸等于移动宽度时，我对卡片的一半使用了折叠。在香草引导动画中，正如预期的那样使用折叠类来完成，但是在我将我的项目转换为 vue js 之后，折叠类完全不起作用。该项目是完整的引导程序，我已将 jquery 插件安装到 vue 中。这是我的代码示例。

    <template>
    <div>
        <div class="prices">
           <div class="container">
              <h1 class="comfortHeader" id="comfortHeader" style="margin-bottom: 50px;">Наши цены</h1>
              <div class="d-flex row no-gutters justify-content-center">
                 <div class="card text-center mt-3" v-for="(price,i) in pricing" :key="i" id="body-collapsed">
                    <div class="card-body">
                       <h5 class="card-title">10 Уроков</h5>
                       <h5 id="biggerSize" class="card-title" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1 600 <span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">за урок</p>
                       <p class="card-text">Всего к оплате 16 000тг </p>
                       <button class="SeeTheCourse mt-5">Начать заниматься</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="'#collapseOne'+i"
                          aria-expanded="false"
                          aria-controls="collapseOne"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                          >
                       <span class="fa fa-chevron-down pull-bottom"></span>
                       </a> 
                       <div id="collapseOne"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed">
                          <transition-group name="list">
                             <div v-for="(subItem,j) in price.items" :key="j">
                                <p id="lowerbodyparagraph" class="card-text">{{subItem.price1}}</p>
                                <p id="lowerbodyparagraph" class="card-text">{{subItem.price2}}</p>
                                <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;" >{{subItem.price3}}</p>
                             </div>
                          </transition-group>
                       </div>
                    </div>
                 </div>
                 <div  v-for="(price,i) in pricing" :key="'k'+i" class="card text-center mt-3" id="body-collapsed2">
                    <div class="card-body">
                       <h5  class="card-title" >30 Уроков</h5>
                       <h5 id="biggerSize" class="card-title d-inline-block" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1 300<span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">за урок</p>
                       <p class="card-text">Всего к оплате 39 000тг </p>
                       <p class="economyTariff">Сэкономить 9 000 тг</p>
                       <button class="SeeTheCourse">Начать заниматься</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="`#collapseTwo+${i}`"
                          aria-expanded="false"
                          aria-controls="collapseTwo"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                          >
                       <span class="fa fa-chevron-down pull-bottom fa-md"></span>
                       </a>
                       <div id="collapseTwo"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed2">
                          <div v-for="(subItem,j) in price.items" :key="'l'+j">
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price4}}</p>
                             <p id="lowerbodyparagraph"  class="card-text">{{subItem.price5}}</p>
                             <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">{{subItem.price6}}</p>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div  v-for="(price,i) in pricing" :key="'p'+i" class="card text-center mt-3" id="body-collapsed3">
                    <div class="card-body">
                       <div class="sale">
                          Лучший выбор!
                       </div>
                       <h5 class="card-title">60 Уроков</h5>
                       <h5 id="biggerSize" style="color: #2FAFE5;font-weight: bold; padding-bottom:5px;padding-top:15px;" class="card-title">1 000 <span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">за урок</p>
                       <p class="card-text">Всего к оплате 60 000тг</p>
                       <p class="economyTariff">Сэкономить 16 000 тг</p>
                       <button class="SeeTheCourse">Начать заниматься</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="`#collapseThree+${i}`"
                          aria-expanded="false"
                          aria-controls="collapseThree"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                          >
                       <span class="fa fa-chevron-down pull-bottom"></span>
                       </a>
                       <div id="collapseThree"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed3">
                          <div v-for="(subItem,j) in price.items" :key="'k'+j">
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price7}}</p>
                             <p id="lowerbodyparagraph"  class="card-text">{{subItem.price8}}</p>
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price9}}</p>
                             <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">{{subItem.price10}}
        </p>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
    </div>
    
    
    <script>
   import $ from 'jquery'
   export default {
     data(){
   return{
     pricing: [{
            name: 'price1',
             expand: false,
              items: [{
          id:1,
          price1:"10 онлайн уроков",
          price2:"Интерактивные задания",
          price3:"Безлимитный доступ к материалам",
                 price4:"30 онлайн уроков",
          price5:"Интерактивные задания",
          price6:"Безлимитный доступ к материалам",
             price7:"60 онлайн уроков",
          price8:"Премиальная поддержка",
          price9:"Обратная связ",
          price10:"Безлимитный доступ к материалам"
               },
   
   
             ]
   
             }
   
         ],
   }
   }
   methods: {
       navItemCollapse(index) {
         this.pricing = this.pricing.map((item, i) => {
           item.expand = !item.expand
           if (i !== index) {
             item.expand = false
           }
           return item
         })
       },
   
   
   
   },
   }
</script>

Answer 1

我在我的开发环境中复制并粘贴了您的代码。我注意到您没有关闭 <template> 标记。此外，在脚本中的data() 部分之后，您必须使用, 将其与方法分开。

在这些修改之后，我将 bootstrap 和 jQuery 添加到我的 main.js 文件中，如下所示：

import 'bootstrap/dist/css/bootstrap.min.css'

import 'jquery/src/jquery.js'

import 'bootstrap/dist/js/bootstrap.min.js'

我还评论了<transition-group> 标签，因为它向我显示了一个警告。对于您使用的跨度标签，我只是将它们替换为一些文本。这是我完整的 Vue 组件：

<template>
    <div>
        <div class="prices">
           <div class="container">
              <h1 class="comfortHeader" id="comfortHeader" style="margin-bottom: 50px;">Наши цены</h1>
              <div class="d-flex row no-gutters justify-content-center">
                 <div class="card text-center mt-3" v-for="(price,i) in pricing" :key="i" id="body-collapsed">
                    <div class="card-body">
                       <h5 class="card-title">10 Уроков</h5>
                       <h5 id="biggerSize" class="card-title" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1 600 <span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">за урок</p>
                       <p class="card-text">Всего к оплате 16 000тг </p>
                       <button class="SeeTheCourse mt-5">Начать заниматься</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="'#collapseOne'+i"
                          aria-expanded="false"
                          aria-controls="collapseOne"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                          >
                       <span>span1</span>
                       </a> 
                       <div id="collapseOne"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed">
                          <!-- <transition-group name="list"> -->
                             <div v-for="(subItem,j) in price.items" :key="j">
                                <p id="lowerbodyparagraph" class="card-text">{{subItem.price1}}</p>
                                <p id="lowerbodyparagraph" class="card-text">{{subItem.price2}}</p>
                                <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;" >{{subItem.price3}}</p>
                             </div>
                          <!-- </transition-group> -->
                       </div>
                    </div>
                 </div>
                 <div  v-for="(price,i) in pricing" :key="'k'+i" class="card text-center mt-3" id="body-collapsed2">
                    <div class="card-body">
                       <h5  class="card-title" >30 Уроков</h5>
                       <h5 id="biggerSize" class="card-title d-inline-block" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1 300<span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">за урок</p>
                       <p class="card-text">Всего к оплате 39 000тг </p>
                       <p class="economyTariff">Сэкономить 9 000 тг</p>
                       <button class="SeeTheCourse">Начать заниматься</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="`#collapseTwo+${i}`"
                          aria-expanded="false"
                          aria-controls="collapseTwo"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                          >
                       <span>span2</span>
                       </a>
                       <div id="collapseTwo"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed2">
                          <div v-for="(subItem,j) in price.items" :key="'l'+j">
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price4}}</p>
                             <p id="lowerbodyparagraph"  class="card-text">{{subItem.price5}}</p>
                             <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">{{subItem.price6}}</p>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div  v-for="(price,i) in pricing" :key="'p'+i" class="card text-center mt-3" id="body-collapsed3">
                    <div class="card-body">
                       <div class="sale">
                          Лучший выбор!
                       </div>
                       <h5 class="card-title">60 Уроков</h5>
                       <h5 id="biggerSize" style="color: #2FAFE5;font-weight: bold; padding-bottom:5px;padding-top:15px;" class="card-title">1 000 <span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">за урок</p>
                       <p class="card-text">Всего к оплате 60 000тг</p>
                       <p class="economyTariff">Сэкономить 16 000 тг</p>
                       <button class="SeeTheCourse">Начать заниматься</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="`#collapseThree+${i}`"
                          aria-expanded="false"
                          aria-controls="collapseThree"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                          >
                       <span>span3</span>
                       </a>
                       <div id="collapseThree"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed3">
                          <div v-for="(subItem,j) in price.items" :key="'k'+j">
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price7}}</p>
                             <p id="lowerbodyparagraph"  class="card-text">{{subItem.price8}}</p>
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price9}}</p>
                             <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">{{subItem.price10}}
        </p>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
    </div>
            
</template>
    
    
<script>
   export default {
     data(){
   return{
     pricing: [{
            name: 'price1',
             expand: false,
              items: [{
          id:1,
          price1:"10 онлайн уроков",
          price2:"Интерактивные задания",
          price3:"Безлимитный доступ к материалам",
                 price4:"30 онлайн уроков",
          price5:"Интерактивные задания",
          price6:"Безлимитный доступ к материалам",
             price7:"60 онлайн уроков",
          price8:"Премиальная поддержка",
          price9:"Обратная связ",
          price10:"Безлимитный доступ к материалам"
               },
   
   
             ]
   
             }
   
         ],
   }
   },
   methods: {
       navItemCollapse(index) {
         this.pricing = this.pricing.map((item, i) => {
           item.expand = !item.expand
           if (i !== index) {
             item.expand = false
           }
           return item
         })
       },
   
   },
   }
</script>

它向我展示了移动分辨率中的a 标签，并且折叠功能也可以使用。但是这里没有动画。也许它来自您未包含的 CSS！