将用户输入转换为可用函数

Question

这一切都在Vue.Js

中完成

我不知道这个标题是否合适，但是，我想做的最终目标是让用户提交我可以输入的内容放入二维码.

这是我的尝试方式：

在新的输入文本标签中创建一个 keyup.enter 事件。

<input type="text" placeholder="Enter Website Name" keyup.enter="newqrurl">

创建新数据，newUrl 并将其设置为等于“”
```
data() {
  return {
    newUrl: ""
  }
},
```
在创建的新函数 newqrurl() 中，我添加了新数据 newUrl，并将其设置为等于 = 到 ""
```
methods: {
  newqrurl() {
    this.newUrl = " "
  }
```

现在我想将新函数插入到我的字符串中。

<img src="https://www.qrtag.net/api/qr_transparent_12.png?url='newUrl'" alt="qrtag">

我可能没有任何意义，因为我对此完全陌生。

Answer 1

你很接近！

您应该使用 v-model 将文本输入的值绑定到数据变量。

<input type="text" placeholder="Enter Website Name" v-model="newUrl">

现在可以使用计算属性计算二维码图片来源

computed: {
  qrImage () {
    return `https://www.qrtag.net/api/qr_transparent_12.png?url=${this.newUrl}`
  }
}

最后，更改 img 元素的 src 属性以引用计算的属性.

<img :src="qrImage" alt="qrtag">

注意 src 属性前的 :。

最后它可能看起来像这样：

<template>
  <div>
    <input type="text" placeholder="Enter Website Name" v-model="newUrl">
    <img :src="qrImage" alt="qrtag">
  </div>
</template>

<script>
  export default {
    data () {
      return {
        newUrl: ""
      }
    },

    computed: {
      qrImage () {
        return `https://www.qrtag.net/api/qr_transparent_12.png?url=${this.newUrl}`
      }
    }
  }
</script>

将用户输入转换为可用函数

Converting User Input into a usable function

keyup

vue.js