我想使用 Vue.js 动态添加和删除样式 pointer-events:none;
属性:
new Vue({
el: '#el',
data: {
toggled: false
},
methods: {
toggle: function () {
this.toggled = !this.toggled;
},
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="el">
<!-- The style disables all mouse events in the div -->
<div style="pointer-events:none;">
...
</div>
<button v-on:click="toggle">Toggle click</button>
</div>
我应该怎么做?
最佳答案
new Vue({
el: '#el',
data: {
toggled: false
},
methods: {
toggle: function () {
this.toggled = !this.toggled;
},
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="el">
<!-- The style disables all mouse events in the div -->
<div :style="{ 'pointer-events': toggled ? 'none' : null }">
...
</div>
<button v-on:click="toggle">Toggle click</button>
</div>
您的<button>
位于 #el
之外,导致它无法被Vue解析。
关于javascript - 使用 Vue.js 的动态样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50985465/