javascript - 与 Math.random 的 v-bind 行为不符合预期

Question

我正在尝试使用 vue 组件为 span 数组随机生成样式。我正在拆分消息并使用 v-for 显示单独的跨度，每个跨度都有自己的词。

const textFx = Vue.component('text-fx', {
  template: '<div class="textFx"><span v-bind:style="{opacity: Math.random().toFixed(2)}" v-for="words in wordArray">{{words}}</span></div>',
  props:['message'],
  data: function() {
    return {
      wordArray: []
    }
  },
  methods: {
    setMessage: function() {
        this.wordArray = this.parseMessage;
    },
  },
  computed: {
    parseMessage: function() {
      var temp = this.message.split(" ");
      for(var i = 0; i < temp.length - 1; i++) {
        temp[i] += " ";
      }
      return temp;
    },
  },
  created: function() {
    this.setMessage();
  }
});

如您所见，我随机设置了每个跨度的不透明度。在那个例子中，它按预期工作，但我不想像那样对每个随机属性进行硬编码，当然，我更愿意使用方法或计算属性。这是我尝试添加到我的组件中的内容:

computedStyle: function() {
      var o = Math.random().toFixed(2);
      return {
        'opacity': o,
      };
    }

然后像这样将它添加到跨度中:

'<div class="textFx"><span v-bind:style="computedStyle" v-for="words in wordArray">{{words}}</span></div>',

这在技术上确实可行，它提供了一个随机的不透明度值，但它对所有跨度应用了相同的随机值，而不是像硬编码示例那样单独应用。

我如何构造它以允许方法或计算属性为呈现的每个跨度重新计算 Math.random 值？

Answer 1

计算属性只有在它的任何依赖数据属性发生变化时才会更新它的值。由于您的 computedStyle 没有依赖属性，因此计算它的函数只运行一次。该计算值不会因后续引用而改变。

在您的情况下，您希望定义一个返回样式对象而不是使用计算属性的方法:

methods: {
  getComputedStyle() {
    return { opacity: Math.random().toFixed(2) };
  }
}

然后，在绑定(bind)到样式时调用该方法，如下所示:

<span v-bind:style="getComputedStyle()"></span>

Here's a working codepen.