Vue是一个流行的JavaScript框架，使用它可以轻松构建互动式和动态的Web应用程序。在Vue中，更新数据源和更改UI的内容是非常容易的。本文将介绍Vue中如何更改数据和UI。

1. 更改数据

<div id="app">
  <button v-on:click="changeStatus"></button>
</div>

<script>

new Vue({
  el: "#app",
  data: {
    status: "off"
  },
  methods: {
    changeStatus: function() {
      this.status = "on";
    }
  }
});

</script>

在上面的代码中，我们定义了一个按钮，并使用v-on指令绑定一个click事件。当按钮被点击时，changeStatus方法将会被调用，它将更新Vue实例中的status属性，并将其值更改为“on”。

2. 更改UI

<div id="app">
  <p>当前状态: {{ status }}</p>
  <button v-on:click="changeStatus"></button>
</div>

<script>

new Vue({
  el: "#app",
  data: {
    status: "off"
  },
  methods: {
    changeStatus: function() {
      this.status = "on";
    }
  }
});

</script>

在上面的代码中，我们使用{{ status }}绑定了Vue实例中的status属性，这样在HTML中的

标签中就可以显示当前状态。当按钮被点击时，changeStatus方法将会被调用，它将更新Vue实例中的status属性，并将其值更改为“on”，此时UI中的状态也会自动更新。

总之，Vue使数据和UI的更改变得非常容易。只需要更改Vue实例中的数据，UI就会自动更新。这使得开发人员可以有效地管理和更新Web应用程序的状态。