javascript - 如何在输入值=""内添加vue输出

我有这段代码，它根据我的用户位置输出一些值，我想在input上显示这些值。但是当我使用<input value="{{useragent}}" />时它只是显示 {{useragent}}不是输出。

<!DOCTYPE html>
<html lang="en">
  <head> </head>

  <body translate="no">
    <div id="app">
     
      <p>{{useragent}}</p>
      <p>{{tsFormatted}}</p>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script id="rendered-js">
      new Vue({
        el: "#app",
        data() {
          return {
            response: null,
            ip: null,
            useragent: null,
            ts: null,
          };
        },
        watch: {
          // This should do a substring of the result returned by CloudFlare
          response: function () {
            this.ip = this.response.substring(this.response.search("ip=") + 3, this.response.search("ts="));
            this.ts = this.response.substring(this.response.search("ts=") + 3, this.response.search("visit_scheme="));
            this.useragent = this.response.substring(this.response.search("uag=") + 4, this.response.search("colo="));
          },
        },

        computed: {
          tsFormatted() {
            return new Date(this.ts * 1000);
          },
        },

        mounted() {
          // Get the user's states from the cloudflare service
          axios.get("https://www.cloudflare.com/cdn-cgi/trace").then((response) => (this.response = response.data));
        },
      });
      //# sourceURL=pen.js
    </script>
  </body>
</html>

我怎样才能显示这个{{values}} HTML 内 <input>标签？

最佳答案

处理输入时，如果您希望 useragent 填充输入字段，则使用 v-model而不是value

<input v-model="useragent" />

您可以从 Vue 2 文档中阅读更多相关信息:https://v2.vuejs.org/v2/guide/forms.html

关于javascript - 如何在输入值=""内添加vue输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73746012/