代码之家 › 专栏 › 技术社区 › William

同一组件中的方法-自动更新

vue.js node.js

William · 技术社区 · 6 年前

所以我知道如何在HTML中实现这一点。但是我不想用div标记和类来隐藏这个。所以我得到的是:

<template>
 <div id="navJade" class="inactive">
    <h1>Jade Skill Calculations</h1>
    <span>Jack of all Jade:</span><input type="number" min="0" max="50" v-model='joaj'></span>Max: 50<br/>
    {{joaj = joajCalc(joaj)}}
  </div>
</template>

<script>

export default {
  name: 'Jade',


  data() {
    return {
      joaj: 0
    }
  },

  methods: {
    joajCalc: (a) => {
      if (a >= 51) a = 50;
      return a;
    }
  }


}
</script>

所以,当这个 {{joaj = joajCalc(joaj)}} data() 但是,它只执行一次,不按需要更新。我当然可以用隐藏的方法,但如果我能避免的话,我宁愿不要。

谢谢!

1 回复 | 直到 6 年前

Efrat Levitan 6 年前

我想你会发现这很有用:

计算属性基于它们的依赖关系进行缓存。经过计算的属性只有在其某些依赖项已存在时才会重新计算改变。

https://vuejs.org/v2/guide/computed.html

<template>
 <div id="navJade" class="inactive">
    <h1>Jade Skill Calculations</h1>
    <span>Jack of all Jade:</span><input type="number" min="0" max="50" v-model='joaj'></span>Max: 50<br/>
    {{joajCalc}}
  </div>
</template>

<script>

export default {
  name: 'Jade',


  data() {
    return {
      joaj: 0
    }
  },
    computed:{
         joajCalc:function(){
      if (this.joaj >= 51) this.joaj = 50;
      return this.joaj;
    }
  }


}
</script>

推荐文章