vue动态配置公式页面

Vue动态配置公式页面可以通过以下步骤完成：

1. 首先，创建一个Vue组件，并在其中定义需要使用的变量和公式。

2. 在组件中使用v-model指令来绑定变量和公式的值，以便可以动态修改它们。

3. 使用computed属性来计算公式的结果，并将其绑定到页面上的元素上。

4. 使用watch属性来监听变量和公式的变化，以便在它们发生变化时重新计算公式的结果并更新页面。

5. 使用v-for指令来循环渲染公式列表，并使用v-on指令来绑定事件处理函数，以便在用户点击时可以动态添加或删除公式。

6. 最后，将组件导出并在需要使用的页面中使用它。

示例代码：

<template>
  <div>
    <div v-for="(formula, index) in formulas" :key="index">
      <input v-model="formula.variable" @change="updateFormula(index)">
      <span>{{ formula.symbol }}</span>
      <input v-model="formula.expression" @change="updateFormula(index)">
      <span>= {{ calculate(index) }}</span>
      <button @click="removeFormula(index)">Delete</button>
    </div>
    <button @click="addFormula">Add Formula</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formulas: [
        { variable: 'x', symbol: '+', expression: '2' },
        { variable: 'y', symbol: '-', expression: '1' },
      ],
    };
  },
  computed: {
    variables() {
      return this.formulas.map((formula) => formula.variable);
    },
  },
  methods: {
    calculate(index) {
      const formula = this.formulas[index];
      const expression = formula.expression.replace(/\b\w+\b/g, (variable) => {
        return formula[variable] || variable;
      });
      return eval(expression);
    },
    updateFormula(index) {
      const formula = this.formulas[index];
      this.$set(formula, formula.variable, formula.variable);
      this.$set(formula, formula.expression, formula.expression);
    },
    removeFormula(index) {
      this.formulas.splice(index, 1);
    },
    addFormula() {
      this.formulas.push({ variable: '', symbol: '+', expression: '' });
    },
  },
  watch: {
    variables: {
      handler() {
        this.formulas.forEach((formula) => {
          if (!formula[formula.variable]) {
            this.$set(formula, formula.variable, '');
          }
        });
      },
      immediate: true,
    },
    formulas: {
      handler() {
        this.formulas.forEach((formula) => {
          formula.result = this.calculate(this.formulas.indexOf(formula));
        });
      },
      deep: true,
    },
  },
};
</script>