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

Posted 2023-02-23

【中文标题】Vue.js 使用数据列表显示隐藏多个元素

【英文标题】：Vue.js show hide multiple elements with data list

【发布时间】：2019-02-22 05:13:34

【问题描述】：

我是 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？ 我应该做哪些正确的事情来达到我的需要？ 如何实现？

【问题讨论】：

你能制作一个代码框来模拟你的问题吗？ codesandbox.io/s/vue

喜欢这个@A.Lau？ codesandbox.io/s/k325km5lqr

【参考方案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

【讨论】：

您的解释很有帮助。谢谢！但我有另一个问题“创建你的根 Vue 实例，一旦你已经这样做了，你就可以在你的不同组件中使用导出默认 对象。”在我的本地已经这样做了，所以我使用 export default ，你的意思是不同的组件是另一个 .vue 文件吗？要不然是啥？因为在实施您的替代解决方案后，有 2 个警告：[Vue 警告]：选项“el”只能在实例创建期间使用 new 关键字。 [Vue 警告]：找不到元素：#skill。我该怎么办@M.Abuaisha？

我在本地 vue codesandbox.io/s/1wqkzon5j4 中制作了代码和框（感谢@A.Lau）@M.Abuaisha 可以检查一下吗？

好的，因为您已经在 main.js 文件中拥有了您的 vue 实例，并且您在那里导入了 App 组件，并且您在 index.html 页面中定位了 id ="app" 的 div 一切都设置好了，我已经对代码进行了一些编辑，现在运行良好

我试图将我的编辑保存在您的代码之上，但没有成功，请查看此链接codesandbox.io/s/l3nqn875p7

【参考方案2】：

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

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