javascript - Vue.js 显示隐藏带有数据列表的多个元素

Question

我是 Vue.js 新手，我正在使用 Vue+Webpack。我需要每个链接在单击时都可以根据每个 id 显示数据，并与显示属性匹配。我在 .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 实例的生命周期钩子(Hook)之一，当您的浏览器获取所有 Vue 代码并尝试将其挂载到所选的 <div> 之上时，它是 Vue 实例的生命周期 Hook 之一。 HTML 正文中的标记，请检查此 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