Vue计算如何设置

时间:2017-07-17 17:08:53

标签: javascript vue.js vuejs2

我试图制作彩票号码服务我想知道如何设置计算机 我指的是vuedoc https://vuejs.org/v2/guide/computed.html#Computed-Properties 所以我跟着vuedoc,但我不知道哪里出错了。

<script async src="//jsfiddle.net/rhmyqswp/embed/"></script>


<section class="saved-lotto-numbers">
<div class="saved-lotto-number-box" v-if="savedNumbers.length">
    <ul class="saved-number-list">
        <li v-for=" (savedlottoNumber,index) in savedNumbers" class="saved-lotto-number">

            <span class="eachnumber">{{savedlottoNumber.numbers}}</span>
            <!-- <span class="eachnumber" >{{ displayNumbers(savedlottoNumber.numbers)}}</span> -->

        </li>
    </ul>
</div>
</section>


 <!-- <span class="eachnumber" >{{ displayNumbers(savedlottoNumber.numbers)}}</span> -->

本节我将尝试设置计算方法becuase

我无法放置图片,因此我更换了网址

https://scontent-icn1-1.xx.fbcdn.net/v/t31.0-0/p280x280/20231970_1418449444910830_4818341573312628187_o.jpg?oh=7457496ac48f6182ae4bca5e88370113&oe=5A105736)

当我保存它按钮它也显示&#39;这一个[]&#39;所以我决定设置计算集

  computed: {
    displayNumbers: function(Numbers) {
        return Numbers;
    }
}

首先我希望在屏幕上看到相同的结果,因为我没有做任何动作只是返回

但我遇到电源错误。

  https://scontent-icn1-1.xx.fbcdn.net/v/t1.0-9/20106562_1418455411576900_6516857588571883325_n.jpg?oh=612817d9a803303f42c9bb107993b919&oe=59C8C567

1 个答案:

答案 0 :(得分:0)

在您的情况下,您应该使用methods而不是computed属性。

methods: {
  displayNumbers(Numbers) {
      return Numbers
  }
}

或者也许是过滤器。

filters: {
  displayNumbers(Numbers) {
    return Numbers
  }
}

并在您的模板中:

<span class="eachnumber" >{{ savedlottoNumber.numbers | displayNumbers }}</span>