在Vue中操作元素

问题描述 投票:0回答:1

我目前正在尝试学习基本的Web开发,现在从在线学习平台上的Vue开始。

带有下面的代码:

<div id="app">
      <form @submit.prevent="onSubmit">
        <input v-model="userName">
        <input type="submit" value="Go">
      </form>
      <div>{{ message }}</div>
    </div>

我想使内部div元素更改为“ Hello”,然后是文本字段(名称)中的内容,然后是“!”。当您按回车

This is my Vue code:

new Vue({
  el: '#app',
  data:{
    message: null,
    userName: null
  },
  methods: {
    onSubmit: function() {
      this.message = this.userName + '!'
    }
  }
})

代码不起作用,我两个给出错误输出:

does not have an onSubmit method which renders the correct message for the value “John Smith” ***(just an example of a name)
does not has an onSubmit method which renders the correct message for some value
javascript html vue.js
1个回答
0
投票

您可以在下面的代码段中看到完美的工作方式。您只需在用户名之前添加“ Hello”,即可获得所需的结果。该漫游器抱怨onSubmit方法返回的值,因为其中没有包含“ Hello”。

const app = new Vue({
  el: '#app',
  data:{
    message: null,
    userName: null
  },
  methods: {
    onSubmit: function() {
      this.message = "Hello " + this.userName + '!'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <form @submit.prevent="onSubmit">
        <input v-model="userName">
        <input type="submit" value="Go">
      </form>
      <div>{{ message }}</div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.