uniapp写法

对于uniapp，我们可以使用Vue的事件绑定和数据绑定来实现为page-container内的元素添加点击出现样式。以下是一个简单的示例：

HTML代码：

<template>
  <div class="page-container">
    <h1>标题</h1>
    <p :class="{ active: activeIndex === 0 }" @click="setActive(0)">第一段内容</p>
    <p :class="{ active: activeIndex === 1 }" @click="setActive(1)">第二段内容</p>
    <p :class="{ active: activeIndex === 2 }" @click="setActive(2)">第三段内容</p>
  </div>
</template>

CSS代码：

.page-container p {
  padding: 10px;
  border: 1px solid #ccc;
}

.page-container p.active {
  background-color: #f00;
  color: #fff;
  border-color: #f00;
}

JavaScript代码：

<script>
export default {
  data() {
    return {
      activeIndex: -1
    };
  },
  methods: {
    setActive(index) {
      this.activeIndex = index;
    }
  }
};
</script>

上述代码中，首先使用Vue的模板语法绑定了点击事件和显示内容的数据绑定。在Vue实例的data中，定义了一个activeIndex变量，表示当前被选中的段落元素的下标。在点击事件setActive中，设置activeIndex的值为当前被点击的段落元素的下标，从而实现为当前段落元素添加active类的效果。