Как использовать объект данных в теге стиля? vuejs

Question

Как использовать объект данных в теге стиля? vuejs

1

Поэтому я пытаюсь создать эффект параллакса, нацеливая background-position с объектом данных.

<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 в значении строки, любые предложения были бы большой помощью :)

James Durham 23 дек. 2018, в 02:57

Источник

0

Вы также можете напрямую назначить любой вычисляемый метод, который будет возвращать объект атрибутов стиля.
Sanjaysinh Zala 24 дек. 2018, в 04:38
0

Возможная копия стиля элемента в списке на основе его свойства в Vuejs
DigitalDrifter 01 янв. 2019, в 10:41

Теги:

javascript

vue.js

2 ответа

Ещё вопросы

Вы также можете напрямую назначить любой вычисляемый метод, который будет возвращать объект атрибутов стиля.
Возможная копия стиля элемента в списке на основе его свойства в Vuejs

DigitalDrifter · Answer 1 · 2018-12-23T00-22-00.000Z

Вам нужно привязать свойство css при использовании объекта:

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

new Vue({
  data() {
    return {
      scrollBanner: 'center'
    }
  },
  methods: {
    scrollPosition() {
      this.scrollbanner = window.scrollY % 0.5;
      console.log(window.scrollY);
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollPosition);
  }
})

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.parallax {
  /* Set a specific height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.img1 {
  background-image: url("https://images.unsplash.com/photo-1543938601-28013263c758?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80");
}

.img2 {
  background-image: url("https://images.unsplash.com/photo-1544155946-9ff87c59ed82?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2855&q=80");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="parallax img1" :style="{ backgroundPosition: scrollBanner }"></div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ligula at libero mollis posuere eget sed massa. Donec sit amet mattis tortor, sit amet bibendum risus. Nam congue non leo nec laoreet. Morbi sit amet sollicitudin elit. Etiam semper
    pulvinar diam, sed eleifend urna dictum vitae. Curabitur quis volutpat tortor. Proin ac molestie augue. Suspendisse lacinia finibus congue. Aliquam erat volutpat. Donec dui erat, rutrum vel lectus ac, volutpat consectetur lectus.</p>

  <p>Nullam quam felis, blandit et interdum quis, facilisis ac est. Praesent sed risus tempor, blandit diam eu, dignissim quam. Suspendisse cursus convallis diam, ac tempor nibh sodales sit amet. Integer condimentum dui sed massa auctor accumsan. Etiam rhoncus
    dui vitae neque malesuada, sit amet aliquet quam sodales. Pellentesque porttitor mauris tellus, at rutrum erat commodo vehicula. Praesent et elit ante. Nam sit amet blandit metus. Praesent vulputate rhoncus felis vestibulum fringilla. Aenean ut malesuada
    eros, ac finibus orci.</p>

  <p>Mauris quis rutrum massa. Phasellus rhoncus scelerisque ante, vel lacinia leo lobortis eu. Phasellus ornare velit nec enim aliquam, sed consequat velit ullamcorper. Maecenas ut justo tellus. Proin dapibus ante felis, ac malesuada velit elementum et.
    Duis at aliquet lorem. Curabitur pharetra dolor nec mauris ultricies sagittis. Sed dignissim commodo molestie. Donec velit lacus, lacinia et commodo sed, posuere vel arcu. Suspendisse potenti. In hac habitasse platea dictumst. Aenean at ultrices nibh.
    Curabitur eu ipsum felis.</p>

  <p>Aenean orci sapien, fringilla vitae fringilla eu, porta nec magna. Pellentesque sit amet enim mollis, elementum sapien eget, condimentum mi. Integer hendrerit posuere augue, sit amet placerat nisi eleifend ut. Pellentesque porttitor dolor a eros sodales,
    sit amet consequat augue vehicula. Nullam volutpat ut quam interdum blandit. Donec sagittis eu dui id ultrices. Nunc ac massa neque. Phasellus volutpat diam ligula, quis maximus nisl sodales ac. Fusce quis tristique neque. Donec venenatis velit pretium
    quam blandit iaculis.</p>

  <p>Aenean sed ornare magna. Sed sodales, neque ut viverra molestie, arcu augue viverra nibh, at dapibus neque libero vel erat. Proin porttitor neque eu aliquam efficitur. Donec lorem elit, aliquam vitae eros at, cursus luctus nunc. Quisque sed ligula vitae
    orci venenatis gravida eu semper metus. Mauris tincidunt laoreet risus, ac consectetur mauris. Cras faucibus enim sit amet neque posuere pharetra. Donec bibendum cursus tempus. Cras vel mauris est. Curabitur velit sapien, venenatis eu gravida ac,
    euismod id odio. In efficitur vestibulum pellentesque. Maecenas eget lorem nisi. Curabitur non ligula ultricies, maximus diam in, consequat nunc. Vestibulum pellentesque justo leo. Nam ut sapien eu ex molestie bibendum. Fusce at ipsum vel quam lacinia
    auctor.</p>
</div>
<div class="parallax img2" :style="{ backgroundPosition: scrollBanner }"></div>

ittus · Answer 2 · 2018-12-22T23-19-00.000Z

Если вы хотите установить background-position, вы можете использовать

<div class="parallaxBanner" :style="{'background-position': scrollBanner}">
</div>