javascript - 如何将数据对象用于样式标签？Vue.js

Question

所以我试图通过使用数据对象定位背景位置来创建视差效果。

<div class="parallaxBanner" :style="{scrollBanner}">
</div>

<script>
    export default {
        data: function(){
            return{
                scrollBanner: 0,
            }
        },
        methods:{
            scrollPosition: function(){
                this.scrollbanner = window.scrollY % 0.5;
                console.log(window.scrollY);
            }
        },
        mounted() {
          window.addEventListener('scroll', this.scrollPosition);
        }
    }
</script>

不是 100% 如何在行值中定位 css 任何建议都会有很大帮助:)

标签： javascriptvue.js

Answer 1

如果你想设置background-position，你可以使用

<div class="parallaxBanner" :style="{ backgroundPosition: scrollBanner }">
</div>