vue实现卡片自适应,vue卡片组件按钮设置
这篇文章主要为大家详细介绍了某视频剪辑软件实现简易选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简易选项卡功能的具体代码，供大家参考，具体内容如下
1. 效果：
1.实现发布评论功能
2.实现评论列表的展示
3.使用标签页切换的方式来实现
4.高亮显示当前标签页栏对应的导航
2.HTML
div id=应用程序
p
button @ click= tab(0):class= current===0？活动":"。评论管理/按钮
button @ click= tab(1):class= current===1？活动":"。发布评论/按钮
/p
div class= box 2 v-show= current===0
div v-for=列表中的项目
p评论人：{{item.username}}/p
p评论时间：{{item.time}}/p
p评论内容：{{item.content}}/p
/div
/div
当前===1
输入v-model= username type= text placeholder=昵称英国铁路公司
输入v-model= content type= text placeholder=评论内容英国铁路公司
按钮@click=提交立即提交/按钮
/div
/div
3.CSS
风格
#应用程序部门{
宽度：600像素
字体大小：14px
框大小：边框-框；
}。方框1 {
高度：200像素
填充：20px 0 0 10px
背景：# eee
}。box2div {
高度：200像素
填充：20px 0 0 10px
背景：# eee
边距-底部：10px
}
p按钮{
宽度：100像素
高度：35px
边框：无；
背景：# e1e1e1
}
p按钮。活动{
背景：蓝色；
颜色：# fff
}。方框1输入{
宽度：350像素
高度：35px
大纲：无；
边框：1px纯色# ccc
边距-底部：10px
边框半径：5px
框大小：边框-框；
}。方框1按钮{
宽度：80px
高度：35px
边框：无；
边框半径：5px
背景：# e1e1e1
}
/风格
4.引入vue.js文件
脚本src= vue。js /脚本
5.实现发布评论选项卡功能
//创建某视频剪辑软件的实例化对象
新Vue({
数据：{
//控制选项卡切换
电流：1,
//与输入框进行数据绑定
用户名： ,
内容： ,
//创建评论管理列表数据
列表：[]
},
方法：{
//点击提交按钮
提交(){
//创建当前时间
let Date=new Date()；
让年份=日期。获取整年()；
让mon=date。getmonth()1；
让日=日期。getdate()；
设时间=年-周一-日；
//创建评论对象
常量信息={
用户名：这个。用户名，
内容：this.content，
时间
}
//将评论对象追加到评论管理的列表末尾
这个。列表。推送(infor)；
//重置投入输入框的内容
这个。用户名=" "；
这个。content=
},
//点击评论管理按钮、发布评论按钮（实现选项卡)
选项卡（索引){
this.current=索引
}
}
}).$ mount( # app )；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。