用vue用户输入两个数AB 自定义一个指令add，要求完成以下操作： 1.调用add指令能够在html页面上显示两数之和 2.要求背景颜色、字体颜色、字体大小可以更改

可以使用Vue来实现这个需求。首先，需要在HTML页面中添加一个用于显示结果的元素，例如一个div，并且需要引入Vue库。

HTML代码：

<div id="app">
  <div :style="{backgroundColor: bgColor, color: textColor, fontSize: fontSize}">{{ result }}</div>
  <input type="number" v-model="num1">
  <input type="number" v-model="num2">
  <button @click="add">Add</button>
</div>

JavaScript代码：

var app = new Vue({
  el: '#app',
  data: {
    num1: 0,
    num2: 0,
    result: 0,
    bgColor: '#f1f1f1',
    textColor: 'red',
    fontSize: '24px'
  },
  methods: {
    add: function() {
      this.result = parseInt(this.num1) + parseInt(this.num2);
    }
  }
});

接下来，可以通过CSS样式来更改背景颜色、字体颜色和字体大小。需要注意的是，需要使用Vue的数据绑定语法来将CSS样式应用到页面元素上。

#app div {
  padding: 10px;
}

最后，当用户输入两个数并点击Add按钮时，页面上会显示它们的和，并且可以通过Vue的数据绑定语法来更改显示的样式。例如：

<div :style="{backgroundColor: bgColor, color: textColor, fontSize: fontSize}">{{ result }}</div>

这里用了Vue的计算属性来计算样式对象，也可以直接在data中定义样式对象。