Vue.js 使用数据列表显示隐藏多个元素

Question

我是 Vue.js 的新手，我正在使用 Vue+Webpack。我需要每个链接在单击时都可以根据每个 id 显示数据，并与 show 属性匹配。我在.vue 文件中创建它。

export default {
  el: 'skill',
  props: {
    skill: Object,
    selectedId: Number
  },
  computed: {
    show () {
      return this.skill.id === this.selectedId
    }
  },
  name: 'HomePage',
  data () {
    return {
      show_skill: 1,
      skills: [
        {
          id: 1,
          title: 'css',
          items: '<li>CSS 3</li><li>Sass/Less</li><li>CSS Animations</li><li>CSS Frameworks : Bootstrap, Zurb Foundation, Bulma, Material Design</li>',
          show: true
        },
        {
          id: 2,
          title: 'js',
          items: '<li>Vanilla JS</li><li>jQuery</li><li>Angular JS</li><li>Vue JS</li><li>Ajax</li><li>JSON</li>',
          show: false
        },
        {
          id: 3,
          title: 'html',
          items: '<li>HTML 5</li><li>SVG Animation</li><li>Canvas</li>',
          show: false
        },
        {
          id: 4,
          title: 'general',
          items: '<li>Responsive Web Design</li><li>Adaptive Web Design</li><li>Hybrid Mobile App</li><li>Wordpress Template</li><li>Email Template</li>',
          show: false
        },
        {
          id: 5,
          title: 'tools',
          items: '<li>Git</li><li>Gulp/Grunt</li><li>Npm</li><li>Webpack</li><li>Bower</li><li>Sketch</li><li>Adobe XD</li><li>Adobe Illustrator</li><li>Adobe Photoshop</li><li>InVision</li><li>Marvel</li>',
          show: false
        }
      ]
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>


<div class="c-skills">
  <a href="#" class="active" @click="skill.show">CSS</a>
  <a href="#">JS</a>
  <a href="#">HTML</a>
  <a href="#">Tools</a>
  <a href="#">General</a>
</div>         

<div class="c-desc" id="vn-skillset">
    <skill :selected-id="selectedId" :post="skill" @click="selectedId = skill.id">
      <h4 v-show="skill.show">{{ skill.title }}</h4>
      <ul v-show="skill.show">{{ skill.items }}</ul>
    </skill>
</div>

目前该代码显示错误：

什么是 vue.esm？什么是 $mount？ 我应该做哪些正确的事情来达到我的需要？ 如何实现？

Answer 1

首先，您必须将所有 HTML 代码包含在一个 <div id="skill"> 标记中，并为该标记设置一个 id，以便您可以在 Vue 实例中定位它。

此外，由于您使用的是 Vue 的 cdn 版本，因此您必须使用 new Vue ({}) 语法来创建您的根 Vue 实例，一旦您已经这样做了，您就可以在不同的组件中使用 export default {} 对象。

$mount 是一个内置属性，也是 Vue 实例的生命周期钩子之一，请查看Instance Lifecycle Hooks

这是您的代码的替代版本：

<div id ="skill">

<div class="c-skills">
  <a href="#" @click="show(1)">CSS</a>
  <a href="#" @click="show(2)">JS</a>
  <a href="#" @click="show(3)">HTML</a>
  <a href="#" @click="show(4)">Tools</a>
  <a href="#" @click="show(5)">General</a>
</div>         

<div>
      <h4>{{ skill.title }}</h4>
      <ul v-html="skill.items"></ul>
</div>
</div>

Vue 实例：

new Vue ({
  el: '#skill',
  data () {
    return {
    skill:{title:'',items:''},
      skills: [
        {
          id: 1,
          title: 'css',
          items: '<li>CSS 3</li><li>Sass/Less</li><li>CSS Animations</li><li>CSS Frameworks : Bootstrap, Zurb Foundation, Bulma, Material Design</li>',
        },
        {
          id: 2,
          title: 'js',
          items: '<li>Vanilla JS</li><li>jQuery</li><li>Angular JS</li><li>Vue JS</li><li>Ajax</li><li>JSON</li>',
        },
        {
          id: 3,
          title: 'html',
          items: '<li>HTML 5</li><li>SVG Animation</li><li>Canvas</li>',
        },
        {
          id: 4,
          title: 'general',
          items: '<li>Responsive Web Design</li><li>Adaptive Web Design</li><li>Hybrid Mobile App</li><li>Wordpress Template</li><li>Email Template</li>',
        },
        {
          id: 5,
          title: 'tools',
          items: '<li>Git</li><li>Gulp/Grunt</li><li>Npm</li><li>Webpack</li><li>Bower</li><li>Sketch</li><li>Adobe XD</li><li>Adobe Illustrator</li><li>Adobe Photoshop</li><li>InVision</li><li>Marvel</li>',
        }
      ]
    }
  },
  methods: {
    show(x){

      for (var i =0; i<=this.skills.length; i++) {

        if (x == this.skills[i].id){
          this.skill.title = this.skills[i].title;
          this.skill.items = this.skills[i].items;
        }
      }       
   }      
  }
});

在您的情况下，我强烈建议您使用 vue-router 属性，这是一个有用的教程：Vue Router documentation

Answer 2

您的要求很简单，但您误解了一些要点，因此以下是您需要进一步研究以实现您现在需要的一些要点

1. 您使用skill 作为模板上的组件，但它只是来自道具的对象。所以你需要学习如何创建一个组件，在另一个组件中声明和使用它。
2. 使用v-for 指令生成技能列表。
3. 您需要学习如何正确使用props和computed。