Vue.js 将样式应用于v-for使用Vuejs动态添加的HTML元素

我使用v-for将元素动态添加到列表中

<ol>
    <li v-for="light in lights">
        <input type="range" min="0" max="255" v-model="light.currentBrightness" v-on:change="setBrightness(light)" />
    </li>
</ol>

我想装饰滑块使用

问题是，当DOM初始化后添加新元素时，它并没有采用rangeslider.js中指定的样式。解决这个问题的方法是在rangeslider.js中调用重新初始化方法，该方法将重新装饰所有滑块元素

我不确定在运行时动态添加元素时如何调用javascript方法。有人知道怎么做吗？对我来说，这似乎是一个非常常见的问题，但我无法通过谷歌搜索找到解决方案

---

我的问题与中讨论的相同。

如果您是JavaScript和Vue的新手，那么您已经非常接近深入了解了。RangeSloider不仅仅是样式（如CSS），它是一个替代内置范围输入的小部件

Vue背后的一个基本思想是，它控制DOM，您只需修改模型，但也存在一些精心控制的异常。组件具有允许插入和修改组件所拥有的DOM元素的位置

:

因此，对于与v-model一起工作的组件，它应该（可以是 在2.2.0+中配置：

• 接受价值道具
• 使用新值发出输入事件

因此，我们制作了一个组件，其模板是范围输入元素。我们给它一个

值

prop。在

挂载的

钩子中，我们初始化输入元素上的RangeSloider（可用作

el

），然后将其设置为在更改时发出

输入

事件

newvue({
el:“#应用程序”，
数据：{
灯光：[{
当前亮度：10
},
{
当前亮度：30
}
]
},
方法：{
addRange:function（）{
这个。灯。推({
当前亮度：50
});
}
},
组成部分：{
范围滑块：{
道具：['value'，'min'，'max']，
模板：“”，
挂载：函数（）{
var vm=这个
$（此。$el）
.val（此.value）
//初始范围滑块
.范围滑块({
polyfill:错误
})
//在更改时发出事件。
.on（'change'，function（））{
vm.$emit（'input'，this.value）
})
}
}
}
});


{{light.currentBrightness}

添加范围
您可以使用以下CSS代码在html5范围输入中应用一些样式：

body {
    padding: 30px;
}
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;

    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;

    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;

    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;

    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

我不太明白这个问题，但可能的解决方案可能是在
mounted（）
lifecycle钩子中初始化range slider。其他方法可能是观察lights数组（我猜它是数组），当检测到更改时，可以启动初始化range slider js的方法。看看这个示例<代码>手表：{lights（）{$（'input[type=“range”]'）.RangeSlaider（）}

这可能有用吗？@BelminBedak我试过手表，但没用。我想这是因为在将HTML元素添加到DOM之前调用了RangeSloider initialize。@RoyJ感谢您的示例。我对Javascript和Vuejs非常陌生，无法理解该示例中的许多部分。你有更简单的例子吗？非常感谢你花时间写这个例子。似乎我需要学习更多来充分理解这背后的概念。再次感谢！