使用 VUEJS 动态更改元素的样式

哈桑·比拉尔

我有div，我想使用 VueJS 应用程序动态更改它的位置。我在 data 函数中有变量 x ，我想将它分配给top。这是我写的代码，但它在模板标签中不起作用：

<template>
    <div id="squar" v-if="showSquar" :style="{top: x}" @click="countClicks">
        click here
    </div>  
</template>

和风格标签：

#squar{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background: rgb(0,70,40,0.8);
    color: white;
    text-align: center;
    vertical-align: middle;
    line-height: 100px; 
    position: absolute; 
    
    }

我工作的组件不是App组件

萨尔维诺

这对我有用：

<template>
  <div id="squar" v-if="showSquar" :style="{ top: top + 'px' }">
    click here
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSquar: true,
      top: 200
    };
  }
};
</script>
<style scoped>
#squar {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: rgb(0, 70, 40, 0.8);
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  position: absolute;
}
</style>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。