uniapp vue和html页面数据交互 写个例子

UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。在UniApp中，Vue.js用于构建页面，而HTML页面数据交互则可以通过Vue的数据绑定和事件绑定来实现。

下面是一个简单的例子，演示了如何在UniApp中实现Vue和HTML页面数据交互：

1. 在Vue组件中定义一个数据属性和一个方法：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, UniApp!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!'
    }
  }
}
</script>

2. 在HTML页面中使用该Vue组件，并通过数据绑定显示和修改数据：

<template>
  <view>
    <custom-component :message="message"></custom-component>
    <button @click="changeMessage">改变消息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, UniApp!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!'
    }
  }
}
</script>

在上述例子中，Vue组件中的`message`数据通过`{{ message }}`的方式绑定到HTML页面中，实现了数据的显示。同时，通过`@click`事件绑定，调用`changeMessage`方法可以修改`message`数据。