uniapp块级级联给个代码案例

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，能够编译到 iOS、Android、H5、以及各种小程序等多个平台。在 uni-app 中，块级级联（block scoped cascading）通常指的是在组件或样式文件中，样式的作用域被限定在特定的区域或模块内，这样可以避免全局样式污染。

以下是一个简单的 uni-app 块级级联样式的代码案例：

<template>
  <view>
    <view class="container">
      <view class="box" :class="{'box-active': isActive}">
        <text>点击按钮切换 box-active 样式</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleBox() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
/* 限制作用域在当前组件内的样式 */
.container {
  width: 100%;
  padding: 20px;
}

/* 使用 ::v-deep 来穿透组件的样式封装，实现块级级联 */
::v-deep .box {
  width: 100%;
  height: 100px;
  background-color: #eee;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

/* 使用动态类名来实现条件样式 */
.box-active {
  background-color: #1aad19;
}
</style>

在这个例子中，我们有一个 `.container` 的容器，里面包含了两个 `.box` 类的视图。其中 `.box` 类定义了基本的样式，而 `.box-active` 类则是通过数据绑定 `isActive` 的值来动态添加或移除的，从而改变 `.box` 的背景颜色。通过 `::v-deep` 模拟了块级作用域，使得 `.box` 类的样式只作用于当前组件内部。