Question

所以我知道如何在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()内部的方法，但是，它只执行一次，并且不会根据需要进行更新。当然，我可以使用隐藏它的方法，但如果可以避免的话，我宁愿不这样做。

谢谢！

Answer 1

我认为您可能会发现有用：

计算的属性根据其依赖关系进行缓存。一个计算属性仅在其某些依赖项具有改变了。

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>

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

1 个答案: