template-options.uvue

<template>
  <view class="page">
    <template v-if="dataInfo.isShow">
      <view class="title">{{ title }}</view>
    </template>
    <view class="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>
    <template v-for="(item, index) in list" :key="index">
      <view class="item">{{ index + 1 }}.{{ item.name }}</view>
    </template>
    <button @click="goMapStyle">跳转绑定 Map 类型 style 页面</button>
  </view>
</template>

<script lang='uts'>
type DataInfo = {
  isShow: boolean
}
type objType = {
  name : string
}
export default {
  data() {
    return {
      title: "hello",
      dataInfo: {
        isShow: false,
      } as DataInfo,
      list: [{
        name: 'foo1'
      },
      {
        name: 'foo2'
      }
      ] as objType[]
    }
  },
  methods: {
    handleShow() {
      this.dataInfo.isShow = !this.dataInfo.isShow
    },
    goMapStyle() {
      uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })
    }
  }
}
</script>

<style>
.item {
  display: flex;
  flex-direction: row;
  margin: 15px;
  border: #eee solid 1px;
}
</style>