Godaddy优惠码网站怎么做的婚庆企业网站建设
Godaddy优惠码网站怎么做的,婚庆企业网站建设,百度网盘电脑版,网站运营seo招聘实现思路#xff1a;
在按钮上绑定一个点击事件#xff0c;默认是true#xff1b;在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片#xff0c;ture则显示#xff1b;在卡片里面写好你想要展示的数据#xff1b;给卡片添加一个取消按钮#xff0c;绑…实现思路
在按钮上绑定一个点击事件默认是true在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片ture则显示在卡片里面写好你想要展示的数据给卡片添加一个取消按钮绑定一个点击事件值为false 完整代码
01-page.vue
template
el-button typedanger round clickshowCard trueDanger/el-buttonel-card v-ifshowCard classbox-cardtemplate #headerdiv classcard-headerspanCard name/spanel-button classbutton textOperation button/el-button/div/templatediv v-foro in 4 :keyo classtext item{{ List item o }}/divbutton clickshowCard false取消/button/el-card/templatescript
export default {data () {return {showCard: false}}
}
/scriptstyle scoped
.card-header {display: flex;justify-content: space-between;align-items: center;
}.text {font-size: 14px;
}.item {margin-bottom: 18px;
}.box-card {width: 480px;
}
/styleindex.js
import { createRouter, createWebHashHistory } from vue-router
// eslint-disable-next-line camelcase
import zero_one from ../views/test_dir/01-pageconst routes [{path: /01,component: zero_one}
]const router createRouter({history: createWebHashHistory(),routes
})export default router
文件结构 效果展示
点击前 点击后
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/90407.shtml
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!