<template> <div id='app'> <div class='main'> <img alt='Vue logo' src='http://m.cgvv.com.cn/bcjs/assets/logo.png'> <HelloWorld msg='Welcome to Your Vue.js App'/> <img alt='Vue logo' src='http://m.cgvv.com.cn/bcjs/assets/logo.png'> </div> <div class='footer'>這是固定在底部的按鈕</div> </div></template><script>import HelloWorld from ’./components/HelloWorld.vue’export default { name: ’App’, components: { HelloWorld }}</script><style>:root{ --footer-height: 50px;}body { padding: 0; margin: 0;}#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}.main{ padding-bottom: var(--footer-height); overflow-y: auto;}.footer{ position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); background: #42b983; color: #fff;}</style>

【增加需求】增加一個A邏輯，當滿足A邏輯的時候，底部按鈕就不展示，其他情況則展示。新增一個Bool值（isShow）來判斷是否顯示底部按鈕，具體代碼如下：

<template> <div id='app'> <div class='main'> <img alt='Vue logo' src='http://m.cgvv.com.cn/bcjs/assets/logo.png'> <HelloWorld msg='Welcome to Your Vue.js App'/> <img alt='Vue logo' src='http://m.cgvv.com.cn/bcjs/assets/logo.png'> </div> <div v-if=’isShow’> <div class='footer-content'>這是固定在底部的按鈕</div> </div> </div></template><script>import HelloWorld from ’./components/HelloWorld.vue’export default { name: ’App’, components: { HelloWorld }, data() { return { isShow: true } },}</script><style>:root{ --footer-height: 50px;}body { padding: 0; margin: 0;}#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}.main { overflow-y: auto;}.footer { height: var(--footer-height);}.footer-content { position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); background: #42b983; color: #fff;}</style>

到此這篇關(guān)于Vue實現(xiàn)固定底部組件的示例的文章就介紹到這了,更多相關(guān)Vue 固定底部內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！