注意点：

• 事件触发的函数 函数@tap @change
• H5页面打包之后 点开报错，无法找到挨app.js

修改config 文件夹下 index.js文件
h5: {
    publicPath: './',                  将 / 改为./ 重新打包
    staticDirectory: 'static',
  }

1.代码

<template>
  <view class="index">
    <h3>列表展示内容</h3>
    <input type="text" placeholder="请输入内容" v-model="textName" />
    <button @tap="add">添加</button>
    <checkbox-group @change="checkboxChange">
      <label
        v-for="item in listData"
        :class="item.isComplate ? 'isCheck' : ''"
        :key="item.name"
      >
        <view>
          <checkbox :value="item.name" />
          <text>{{ item.name }}</text>
        </view>
      </label>
    </checkbox-group>
  </view>
</template>

<script>
import "./index.scss";
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
      textName: "",
      listData: [],
    };
  },
  methods: {
    add() {
      if (!this.textName) return;
      this.listData.unshift({
        name: this.textName,
        isComplate: false,
      });
      this.textName = "";
    },
    checkboxChange(e) {
      this.listData = this.listData.map((item) => {
        return {
          name: item.name,
          isComplate: e.detail.value.indexOf(item.name) > -1,
        };
      });
    },
  },
};
</script>

2.按钮事件触发 使用 @tap

  <button @tap="add">添加</button>

3.checkbox-group事件触发 使用 @change

 <checkbox-group @change="checkboxChange">
      <label
        v-for="item in listData"
        :class="item.isComplate ? 'isCheck' : ''"
        :key="item.name"
      >
        <view>
          <checkbox :value="item.name" />
          <text>{{ item.name }}</text>
        </view>
      </label>
    </checkbox-group>

4.微信小程序以及H5页面展示效果如下

打包命令 taro build --type weapp

打包命令 taro build --type h5