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

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

  •  0
  • 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 年前
        1
  •  1
  •   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>