汇总来自输入的值并添加＆＃34;？＆＃34;或＆＃34;！＆＃34;使用Vue.js创建链接

Question

我有几个输入字段，它们一起形成类似的长链接 http://example.com?name=xxx&lastname=xxx ...

我从输入字段中获取初始名称和姓氏。

在我正在显示连接链接的表单下使用 {{model.http}} {{model.fname}} {{model.lname}}

但是我还没弄清楚如何投入＆＃34;？＆＃34;和＆＃34;＆amp;＆＃34;它应该在哪里。

那么......我该如何动态添加＆＃34;？＆＃34;一旦有人开始用＆＃34;名字＆＃34;输入

Answer 1

如果您正在使用vue.js，我假设您的输入是v-model。 只要将v-model指令添加到输入标记，Vue就会使用它附加的输入字段动态更新javascript对象。因此，您不必担心动态部分 - 已经为您处理过。

为了显示链接，您可以使用字符串模板来构建连接链接，并将此字符串模板放在您想要的位置。 Vue将使用对象值动态更新链接。您可以通过在页面上打开带有输入的开发人员工具（将v-model指令添加到输入标记中）来确认这一点，当您在网页中提供输入时，绑定的javascript对象将在开发人员控制台中自动更新。

例如，如果您尝试使用http.put请求命中api，并且使用v.models提供了model.http，model.fname和model.lname ...

this.http.put(`$(model.http)?name=$(model.fname)&lastname=$(model.lname)`);

Answer 2

您可以使用计算属性：

computed: 
  {
    url : function()
  {
    if(this.first =='') return '';
    return "http://example.com&name=" + this.first + "&lastname=" + this.last
  }
 }

看到这个工作小提琴：https://jsfiddle.net/udycnzq7/