vue使用element ui绘制一个switch开关，圆角矩形开关分为分页与列表两部分，v-model=“”switchVal”，switchVal为false时是列表，true时为分页，为分页时列表的样式置灰或者透明分页则显示为蓝色，为列表时分页的样式置灰或透明列表则显示为蓝色，开关始终显示列表与分页，只存在颜色的差异

你可以使用Element UI中的Switch组件来实现你的需求。

首先，在template中定义一个Switch组件，并将v-model绑定到switchVal变量上：

<el-switch v-model="switchVal"></el-switch>

然后，在data中定义switchVal变量，并为其设置默认值false：

data() {
  return {
    switchVal: false
  }
}

接下来，你可以使用条件渲染来根据switchVal变量的值来显示不同的样式。

当switchVal为false时，显示列表样式：

<div v-if="!switchVal" class="list-style">
  <!-- 列表样式 -->
</div>

当switchVal为true时，显示分页样式：

<div v-if="switchVal" class="pagination-style">
  <!-- 分页样式 -->
</div>

为了实现颜色的差异，你可以在CSS中定义两种不同的样式，并根据switchVal的值来动态添加类名：

.list-style {
  /* 列表样式 */
  background-color: #ccc; /* 列表背景色 */
}

.pagination-style {
  /* 分页样式 */
  background-color: blue; /* 分页背景色 */
}

.switch-val-false .pagination-style {
  opacity: 0.5; /* 分页样式置灰 */
}

.switch-val-true .list-style {
  opacity: 0.5; /* 列表样式置灰 */
}

最后，在Switch组件上动态绑定class，根据switchVal的值来添加不同的类名：

<el-switch :class="{'switch-val-false': !switchVal, 'switch-val-true': switchVal}" v-model="switchVal"></el-switch>

这样就可以实现你的需求了。注意，以上代码仅供参考，具体实现可能需要根据你的具体需求进行修改。