需求：在当前企业名片主题 (EnterpriseTheme) 为 'qinglianxiyu' 时，该组件所占位置的 margin-top 为'0'；其他情况为'260px'。

1.用:style的方式

HTML部分：

<!-- 注意此处的属性名，需用驼峰式而不能用连接符式 -->
<div :style="{marginTop: enterpriseTheme === 'qinglianxiyu' ? '0' : '260px'}"
     class="view-btn">
</div>

<!-- 使用数组的形式，传入多个对象；常用于自定义弹框，width和其他样式是分开传的情况 -->
<div :style="[{width: `${width}px`}, otherStyle]"
     class="view-btn">
</div>

<!-- 使用”与“的形式，区别于三元表达式 -->
<div :style="data.bold && 'fontWeight: bold'"
     class="view-btn">
</div>

2.用:class的方式

HTML部分：

<div :class="{ 'no-margin-top': enterpriseTheme === 'qinglian
     class="view-btn">
</div>

CSS部分：

// 此处"margin-top: 260px;"直接写在 class="view-btn" 中
.no-margin-top {
   margin-top: 0;
}

（附： 添加多个类名的情况  参考文章：vue中动态添加class类名_gary的博客-CSDN博客_vue 动态类名（vue中动态添加class类名））

<!-- 第一种方式:对象的形式 -->
<div :class="{'first-class' : isFirstClass, 'second-class': !isFirstClass}">对象的形式</div>
<!-- 第二种方式:三元表达式 注意点：放在数组中，类名要用引号-->
<div :class="[ isFirstClass ? 'first-class' : 'second-class' ]">三元表示式</div>
<!-- 第三种方式: 数组的形式 -->
<div :class="[firstClassName, secondClassName]">数组的形式</div>