vue.js 中的平方根

卡布

我正在尝试创建一个 vue.js 应用程序。我的“结果”方法有问题 - 它应该对输入中传递的数字进行平方根。我该怎么做才能让它发挥作用?

HTML:

  <div id="app" class="container">
      <button class="root" @click="filter()">Root Extraction</button>
    <template v-if="rootObject.squareRoot">
      <div class="rootBox">
        <h1>Type a random number to square root it!</h1>
        <input id="number" type="number" min="0"/>
        <button id="button" @click="results()" type="button">Count it</button>
        <h1 id="result"></h1>
      </div>
    </template>
  </div>

JS:

var result = document.getElementById("result");
new Vue({
  el: '#app',
  data: {
    rootObject: {
      squareRoot: false,
    }
  },
  methods: {
    results: function () {
      result.innerHTML = "Square rooted number is: " + Math.sqrt(document.getElementById("number").value);
    },
    filter: function() {
      this.rootObject.squareRoot = !this.rootObject.squareRoot;
    }
  }
})
阿索诺夫斯基

所以你的问题的简单答案是你不应该在 vuejs 中使用“document.getBy ...”,它会导致时髦的结果。使用 VueJs 内置插值系统,它将确保您的应用程序是响应式的。

这是一个带有代码的工作版本的小提琴手https://jsfiddle.net/49gptnad/784/

这是代码:HTML

<div id="app" class="container">
  <button class="root" @click="toggleSquareRoot()">Root Extraction</button>
  <template v-if="squareRootOpen">
    <div class="rootBox">
      <h1>Type a random number to square root it!</h1>
      <input id="number" type="number" min="0"/>
      <button id="button" @click="computeResults()" type="button">Count it</button>
      <h1>{{results}}</h1>
    </div>
  </template>
</div>

JS

new Vue({
  el: '#app',
  data: {
    // no need for data to be nested
    squareRootOpen: false,
    results: "n/a"
  },
  methods: {
    // compute the output and store it in VueJs
    computeResults: function () {
      this.results = Math.sqrt(document.getElementById("number").value)
    },
    toggleSquareRoot: function() {
      this.squareRootOpen = !this.squareRootOpen;
    }
  }
})

因此,请注意您的代码:

  1. 使用更详细的命名方案。“过滤器”并不是真正描述函数正在做什么。

  2. 在 stackoverflow 上发布之前阅读文档。VueJs 实际上在解决这类问题方面做得很好:https ://vuejs.org/v2/guide/syntax.html#Text

  3. 学习正确的 HTML 语法,你有很多错别字(没有空间,不需要结束标签)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章