问答博客资讯标签用户活动
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

关于Vue中v-for问题

头像
清风明月
    4011531

    关于tab标签切换问题：
    1580301987(1).png

    这是SemanticUI上的tab组件，拿来就用了

    原始代码

    $('.menu .item') .tab() ;
    <div class\="ui top attached tabular menu"\>  
    <a class\="active item" data-tab\="first"\>First</a\>  
    <a class\="item" data-tab\="second"\>Second</a\>  
    <a class\="item" data-tab\="third"\>Third</a\>  
</div\>  
<div class\="ui bottom attached active tab segment" data-tab\="first"\> First  </div\>  

<div class\="ui bottom attached tab segment" data-tab\="second"\> Second  

</div\>  <div class\="ui bottom attached tab segment" data-tab\="third"\> Third  </div\>

    现在基于vue,后台传递过来数据，通过v-for遍历出分类数据，点击分类名称，能切换下面对应的div

    现在是这种样子：
    1580302543(1).png
    局部：

    <div id\="workArea" class\="m-container m-padded-tb-big"\>  
     <div class\="ui top attached tabular menu"\>  
        <a v-for\="c in categories" class\="active item" data-tab\="first"\>{{ c.name}}</a\>  
     </div\>  
     <div class\="ui bottom attached active tab segment" data-tab\="first"\>  
        First  
     </div\>  
</div\>

    下面的div代码该如何写呢，尝试过很多，但最终都失败了。

    这是全部代码：

    <!DOCTYPE html\>  
<html xmlns:th\="http://www.w3.org/1999/xhtml"\>  
 <head\>  
 <meta charset\="utf-8"\>  
 <title\>工具</title\>  
 <link rel\="stylesheet" type\="text/css" href\="../../static/css/me.css" th:href\="@{/css/me.css}"\>  
 <link rel\="stylesheet" href\="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"\>  
 </head\>  
 <body style\="background: #439B78;"\>
 
 <div style\="height: 20px;"\></div\>  
<div id\="workArea" class\="m-container m-padded-tb-big"\>  
 <div class\="ui top attached tabular menu"\>  
 <a v-for\="c in categories" class\="active item" data-tab\="first"\>{{ c.name}}</a\>  
 </div\>  
 <div class\="ui bottom attached active tab segment" data-tab\="first"\>  
  First  
   </div\>  
</div\>

<script src\="../../static/js/jquery.min.js" th:src\="@{/js/jquery.min.js}"\></script\>  
 <script src\="../../static/js/vue.min.js" th:src\="@{/js/vue.min.js}"\></script\>  
 <script src\="../../static/js/axios.min.js" th:src\="@{/js/axios.min.js}"\></script\>  
 <script src\="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"\></script\>  
 <script type\="text/javascript"\>  
  $(function(){  
      var data1 \= {  
        uri: 'forekit',  
        categories: \[\]  
        };  
     var vue \= new Vue({  
         el: '#workArea',  
         data: data1,  
         mounted:function(){  
        this.load();  
        },  
 methods:{  
      load: function() {  
          var url \= this.uri;  
          axios.get(url).then(function(response){  
          vue.categories \= response.data;  
        }); 
     } 
    } 
 });  
  $('.menu .item').tab();  
});  
 </script\>  
 </body\>  
</html\>
    vue.jsjquery
    阅读 1.8k
    1 个回答
    得票最新
    头像
    asseek
      9.4k53148
      ✓ 已被采纳

      data，也就是你代码中data1内加个变量active记录当前点击项的值，在下面展示出来即可

      var data1 = {
  uri: 'forekit',
  categories: [],
  active: '',
};

      template

      <div id="workArea" class="m-container m-padded-tb-big">
  <div class="ui top attached tabular menu">
    <a
        v-for="c in categories"
        :class="{active: active === c.name, item: true}"
        :key="c.name"
        :data-tab="c.name"
        @click="active = c.name">
      {{ c.name}}
    </a>
  </div>
  <div class="ui bottom attached active tab segment" :data-tab="active">
    {{ active }}
  </div>
</div>

      这是基础问题，建议多看几遍文档

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