请问 在v-for里这样使用v-show为什么不生效?
我想做一个歌手专辑的展示界面,通过点左面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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
你的v-show并没有放在contenttemplate上 而是他的默认插槽里。。。。
还有 import组件的时候这样命名把contentTemplate 用的时候content-template 这样可读性高一些。
点左侧分类的时候直接改
contentlist
的数据就好了。或者将
contentlist
当做计算属性,依赖左侧分类进行自动计算。左边的tab定义一个数组对象例如
然后右边的div可以用
v-if="status == 1"
或者
v-show="status == 1"
这些应该就差不多了吧,我一直写ng,不过两个差不多的。可以多看看文档哦。
不要直接粘贴代码,自己去写。我可能单词有错误吧