代码之家 › 专栏 › 技术社区 › Ilijanovic

Vue JS不会只在第一个循环中更新DIV中的样式

dynamic vue.js javascript

Ilijanovic · 技术社区 · 6 年前

我有4个选择。如果我单击一个选项来更改我的分区中的样式

我在console.log()上用setinterval()尝试了它,它正确地显示了我的值,但是Vue JS不更新它。

<div  v-bind:style="{'box-shadow': schatten, width: breite, height: hoehe, 'text-align': center, margin: mitte, padding: abstand, background: backcolor}">

setInterval(function(){
    var e = document.getElementById("selection");
    var strUser = e.options[e.selectedIndex].value;
var box = new Vue({
    el: '#anmeldebox',
    data: {

        schatten: '0px 0px 25px black',
        breite: '400px',
        hoehe: '200px',
        center: 'center',
        mitte: '0 auto',
        abstand: '20px',
        backcolor: strUser

    }
});

}, 3000);

所以struser得到了另一个值,但它仍然不更新

1 回复 | 直到 6 年前

Roy J 6 年前

strUser 不是Vue数据项,因此不是被动的。你应该更新 backcolor . 您也不应该在每次触发间隔时重新创建Vue实例。

您应该让Vue控制两个选择和使用一个间隔来轮询一个select的分区非常糟糕。

下面是一个简单的例子,选择控制一个DIV的背景色。

new Vue({
  el: '#app',
  data: {
    selectedStyle: 'red'
  }
});

.box {
  height: 20em;
  width: 20em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selectedStyle">
    <option>red</option>
    <option>blue</option>
  </select>
  <div class="box" :style="{backgroundColor: selectedStyle}"></div>
</div>

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

6 月前

Ben Foltz · 更新/删除递归子组件

7 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

7 月前

Felix · 更改vuetify v-field标签字体大小

7 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

7 月前

CentralDev · 如何导出和导入js文件?

11 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

11 月前

gespinha · 当元素不再可见时,如何更改ref元素?

1 年前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

1 年前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

1 年前