vue.js 使用带有无功值的进度或 Jmeter 标签

yrefmtwq 于 2022-12-04 发布在 Vue.js

关注(0)|答案(1)|浏览(97)

在我的基于vue类的组件中，我想使用一个React性值，通过<progress>或<meter>标记实时显示进度的变化。
为此，我创建了一个变量，其中包含一个基本值

percentCore: number = 0

然后我的计划是，每当我用get/set从密码检查器函数中更新这个变量时，都要监听对它的更改（这是基于vue类的组件的推荐计算prop方式）

get percent(): number {
    return this.percentCore
  }

  set percent(val) {
    this.percentCore = val
  }

现在，我将reactive percent变量赋给progress标记的“value”属性

<progress max="100" value="percent"></progress>

但是更新时什么也没发生，不过passwordChecker函数工作得非常好，因为我可以在打印时看到要更新的正确值

{{ percent }}

我的结论是进度或 Jmeter 标签的值不允许是React性的。有什么解决这个问题的方法吗？

1条答案

看起来您需要使用v-bind:（或简写:）设置“value”属性，如下所示：

<progress max="100" :value="percent"></progress>

省略:会将属性设定为字串"percent"，而不是percent属性的值。