将用户输入转换为可用功能

Question

这一切都是在Vue.Js 中完成的

我不知道标题是否合适，但我尝试做的最终目标是让用户提交一个输入，我可以将其放入二维码中。

以下是我的尝试：

1. 在新的输入文本标记中创建keyup.enter事件。

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

2. 创建新数据newUrl并将其设置为"">

   data() {
   return {
   newUrl: ""
   }
   },
   

3. 在创建的新函数newqrurl((中，我添加了新的数据newUrl，并将其设置为等于"=">

   methods: {
   newqrurl() {
   this.newUrl = " "
   }
   

4. 现在我想把这个新函数插入到我的字符串中。

   <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>