如何在 vue 的另一个变量中渲染变量？

Question

Vue 是否可以在另一个变量中渲染变量，如果不能，我该如何实现？

---

data() {
  return {
    SQL: {
      columns: ["id", "status", "post"],
      table: "users",
      limit: 10,
      query: "SELECT {{columns}} FROM {{table}} WHERE 1 LIMIT {{limit}}"
    }
  }
},
computed: {
  makeSQL: {
    return this.SQL.query; // should return "SELECT id, status, post FROM users WHERE 1 LIMIT 10"
  }
},

---

Answer 1

您可以使用getter

data() {
  return {
    SQL: {
      columns: ["id", "status", "post"],
      table: "users",
      limit: 10,
      get query() {
         return `SELECT ${this.columns.join(',')} FROM ${this.table} WHERE 1 LIMIT ${this.limit}`
      }
    }
  }
},
computed: {
  makeSQL: {
    return this.SQL.query; // should return "SELECT id, status, post FROM users WHERE 1 LIMIT 10"
  }
},

PS：这更像是一个 javascript 功能，可以根据对象中其他键的值生成一个值。 不确定 Vue 在这方面是否有特定的功能。

您可以使用计算属性 makeSQL 返回 SELECT ${this.columns.join(',')} FROM ${this.table} WHERE 1 LIMIT ${this.limit}，这应该会为您提供相同的结果。

Answer 2

最好使用计算变量。像这样将查询变量移动到计算变量中

computed: {
    query() {
        return 'SELECT ' + this.SQL.columns.join(',') + 'FROM ' + this.SQL.table + ' WHERE 1 LIMIT ' + this.SQL.limit;
    },
    makeSQL() {
        return this.query;
    }
}