我正在使用 Vue.js,我想更改 CSS 类属性。 使用该类的 HTML 代码如下:
<div class="fillTimerBar"></div>
以及 CSS 代码:
.fillTimerBar {
width: 100%;
height: 8px;
}
从那里我想使用 Vue 组件中的 computed
属性更改 width
类属性。
如果有的话,哪种方法是正确的?
最佳答案
你必须使用 v-bind:style
指令。
var vm = new Vue({
el: '#example',
data: {
width:'200px'
},
computed: {
computedWidth: function () {
return this.width;
}
},
methods: {
changeWidth: function (event) {
this.width='100px';
}
}
})
#myDiv{
background-color:red;
height:200px;
}
<script src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script>
<div id="example">
<div id="myDiv" v-bind:style="{ width: computedWidth }"></div>
<button v-on:click="changeWidth()">Change</button>
</div>
关于javascript - 使用 Vue.js 更改 CSS 类属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46195802/