Question

我对vue有点新意，也许我正在尝试做一些不可行的事情。

我有这个骨架：

<div class="row"> <!--FIRST ROW-->
 <skills-list></skills-list>  
</div>
<div class="row"> <!--SECOND ROW-->
 <skills-list></skills-list>  
</div>
<div class="row"> <!--LAST ROW-->
 <skills-list></skills-list>  
</div>

现在我有三行，每行包含一个vue自定义组件，这是我的应用程序：

Vue.component('skills-list', {
    template: `
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="text-center">
        <i :class="skills[0].class"></i>
      </div>
      <div class="progress-container">
        <div class="progress" :id="skills[0].id"></div>
      </div>
    </div>
    `,
    data: function(){
      return {
        skills : [
          {'class':'icon-html5-alt skills_icon','id':'#progress-html'},
          {'class':'icon-css3-alt skills_icon','id':'#progress-css'},
          {'class':'icon-javascript-alt','id':'#progress-js'}


        ]
      }
    }


  });

new Vue({
        el: '#cv_app',
    });

我的自定义组件模板有两个dinamic值，即技能数组中列出的类和id。我想填写我在html代码中插入的每个模板的值，我的意思是：以某种方式替换：class =“skills [0] .class with：class =”skills [i] .class迭代技能数组。希望我能解释清楚，是否有可能？

在vue组件上改变dinamically类和id

0 个答案: