Question

我正在尝试创建一个vue.js应用。我的结果出现问题＆＃39;方法 - 它应该平方根输入中传递的数字。我能做些什么才能让它发挥作用？

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;
    }
  }
})

Answer 1

所以对你的问题的简单回答是你不应该使用＆＃34; document.getBy ...＆＃34;与vuejs，它导致时髦的结果。使用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; } } })

关于你的代码的一些注释：

使用更详细的命名方案。＆＃34;过滤器＆＃34;并不是对函数正在做什么的描述。

在stackoverflow上发布之前阅读文档。 VueJs实际上做得很好，涵盖了这类担忧：https://vuejs.org/v2/guide/syntax.html#Text

学习正确的HTML语法，你在那里有很多错别字（没有空间，不需要关闭标签）

vue.js中的平方根

1 个答案: