Question

我试图使用vue组件为一组跨距随机生成样式。我正在拆分消息并使用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没有依赖属性，因此计算它的函数只运行一次。该计算值不会随后引用而改变。

你的情况是你想要定义一个返回样式对象而不是使用computed属性的方法：

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

然后，在绑定到样式时调用方法，如下所示：

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

Here's a working codepen.

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

1 个答案: