代码之家 › 专栏 › 技术社区 › 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>

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前