请问 在v-for里这样使用v-show为什么不生效?

发布于 2022-09-06 02:43:30 字数 1693 浏览 14 评论 0

我想做一个歌手专辑的展示界面,通过点左面Menu的内容来切换右边的内容,右边每一个模块对应一个专辑的模块,可以试听,
图片描述

首先我写了两个模板 一个是菜单模板一个是内容模板 然后我把它放到这个当前页面里,
图片描述

目前我的思路是就是通过点击左面的Menu 来调一个方法,这个method来控制右边的有某些特定class的contenttemplate是否display,

由于接触Vue不太长,对这里有点云里雾里,现在的问题是,我想控制隐藏某个contenttemplate,这样写是没有效果的,并不能隐藏..请问是哪里的问题呢?同时,还想问一下各位dalao,我要实现这个功能还有没有更好的思路呢?

   <div class="content">
    <contenttemplate v-for="content in contentlist">
     <div v-show="content.show">
      <span slot="artiletitle"  >{{content.title}}</span>
      <span slot="articlecontent">{{content.content}}</span>
    </div>
    </contenttemplate>
   </div>
  </div>
</div>
</template>
<script scoped>
import contenttemplate from '../components/content-template'
import menutemplate from '../components/menu-template'
export default{
    data(){
      return{
           profileimg :require( "../assets/profile/boku.jpg"),
           Menulist:["All","Single","Album","Other","DvD"],
           currenttitle:"All",
           contentlist:[
             {title:123,content:"阿斯大时代",cls:"Single",show:true},
             {title:2132323,content:"阿斯打死打伤打是",cls:"Album",show:false}
           ],
      }
    },
    components:{
       contenttemplate,
       menutemplate
    },

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

江湖正好 2022-09-13 02:43:30
    <contenttemplate v-for="content in contentlist">
         <div v-show="content.show">
          <span slot="artiletitle"  >{{content.title}}</span>
          <span slot="articlecontent">{{content.content}}</span>
        </div>
    </contenttemplate>

你的v-show并没有放在contenttemplate上 而是他的默认插槽里。。。。
还有 import组件的时候这样命名把contentTemplate 用的时候content-template 这样可读性高一些。

不甘平庸 2022-09-13 02:43:30

点左侧分类的时候直接改contentlist的数据就好了。
或者将contentlist当做计算属性,依赖左侧分类进行自动计算。

冷情妓 2022-09-13 02:43:30

左边的tab定义一个数组对象例如

// html 代码
<div>
<span v-for="item in tab" v-on:click="changeValue(item)">
{{item.name}}
</span>
</div>
data(){
return {
  status:'',
  tab: [{
name:'全部',
value:1
},{
name:'歌手',
value:2
},{
name:'创作人',
value:3
}]
}
},
methods:{
changeValue:function(item){
 this.status = item.value;
}
}

然后右边的div可以用
v-if="status == 1"
或者

v-show="status == 1"

这些应该就差不多了吧,我一直写ng,不过两个差不多的。可以多看看文档哦。

不要直接粘贴代码,自己去写。我可能单词有错误吧

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文