Vue中内联样式的动态CSS属性答案

【问题标题】：Dynamic CSS property of inline style in VueVue中内联样式的动态CSS属性
【发布时间】：2020-03-19 08:10:17
【问题描述】：

我正在循环遍历元素并使用顶部和左侧 CSS 属性定位 div：

<div
v-for="coord in coords"
:style="{ top: coord.y + 'px', left: coord.x + 'px' }"
></div>

有时我需要使用 bottom 而不是 top 属性（这取决于我的 Vuex 存储值之一）。如何动态定义是否应该使用top 或bottom CSS 属性？

我尝试使用计算属性 isTopOrBottom，它会返回“顶部”或“底部：:style="{ isTopOrBottom: coord.y + 'px', left: coord.x + 'px' }"”。但这在 Vue 中不起作用。

【问题讨论】：

您可以只创建一个组件<coord>，然后为样式定义一个computed() 属性。在计算属性中，您可以根据您的条件返回一个对象。或者 - 如果您不想创建单独的组件 - 您可以定义一个方法并从模板中调用它。然后，根据您的条件传递坐标并返回一个对象。方法调用不像计算属性那样被缓存。

标签： vue.js vuejs2

【解决方案1】：

你可以这样做：

:class="{ is-top: isTop, is-bottom: isBottom }"

在你的script:

computed() {
    isTop() {
        // return top condition
    },
    isBottom() {
        // return bottom condition
    }
}

处理css：

.is-top {
    ...
}
.is-bottom {
    ...
}

【讨论】：

我无法定义 .is-top 和 .is-bottom 类，因为它们的值是动态的。所以需要内联。

【解决方案2】：

您可以使用三元运算符（以防计算属性不起作用）例如：

<span
class="description"
:class="darkMode ? 'dark-theme' : 'light-theme'"

希望对您有所帮助。

【讨论】：

这是正确答案。具有计算属性的三元运算符完成了这项工作：` :style="{ top: isTop ? coord.y + 'px' : '', bottom: !isTop ? coord.y + 'px' : '', left: coord. x + 'px' }"`。谢谢！

【解决方案3】：

应该像 JavaScript 字符串拼接

<div
v-for="coord in coords"
:style="'top: '+coord.y + 'px;left: '+coord.x + 'px'"
></div>

Vue.config.productionTip = false;
Vue.config.devtools=false;

var app = new Vue({
  el: '#app',
  data:{
    coords:[{y:10,x:10},{y:20,x:20},{y:30,x:30}]
  }
});

.border-line{
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<div class="border-line"
    v-for="coord in coords"
    :style="'margin-top: '+coord.y + 'px;margin-left: '+coord.x + 'px'"
    >Test</div>
 </div>

【讨论】：

【解决方案4】：

您也可以为此使用 Vuejs 自定义指令！ https://vuejs.org/v2/guide/custom-directive.html

看看这个：

在您的模板中：

 <p v-position="expressionThatMakesItTop" v-if="isSignedIn">Welcome back {{user.email}}</p>

如果您想在本地注册指令，组件也接受指令选项，请查看我链接的文档。我将在您的 main.js 文件中向您展示如何在全局范围内执行此操作，当然在构建 Vue 实例之前：

我留下了显示您可以在指令中使用的对象的 console.log，以便您可以在控制台上探索它们并根据您的需要进行调整。

Vue.directive("position", {
  bind: function(el, binding, vnode) {
    console.log(el, binding, vnode);
    el.style.left = `${vnode.context.coord.x}px`;
    if (binding.value) {
      el.style.top = `${vnode.context.coord.y}px`;
      return;
    }
    el.style.bottom = `${vnode.context.coord.y}px`;
  }
});

【讨论】：