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代码封装到一个const one = Observable.of('https://api.github.com/users'); const two = (c) => ajax(c);//ajax from Rxjs/dom library one.mergeMap(two).subscribe(c => console.log(c))标签中，并为该标签设置一个ID，以便可以在Vue实例中定位它。

此外，由于您使用的是Vue的CDN版本，因此必须使用<div id="skill">语法创建根Vue实例，一旦完成，您就可以在不同组件中使用new Vue ({})对象。

$ mount是一个内置属性，它是Vue实例的生命周期挂钩之一，当您的浏览器获取所有Vue代码并尝试将其安装在您所选的export default {}标记之上时HTML正文，请选中此Instance Lifecycle Hooks

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

<div>

Vue实例：

<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-router属性，这里是一个有用的教程：Vue Router documentation

Answer 2

您的要求很简单，但您会误解某些要点，因此以下是您需要进行更多研究以实现现在需要的要点

您正在将skill用作模板上的组件，但这只是props中的Object。因此，您需要学习如何创建组件，在另一个组件中声明和使用它。
使用v-for指令生成技能列表。
您需要学习如何正确使用props和computed。

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

2 个答案: