vue.js에서 스타일을 계산하거나 사용하는 방법
vuejs 스타일 바인딩을 사용하여 스타일을 계산할 때 동적으로 변경 내용을 렌더링하고 있습니다.
이 기능은 Vue 인스턴스의 범위 내에 있는 모든 것에 유효합니다만, 본문 태그 또는 HTML 태그의 스타일을 계산하려면 어떻게 해야 합니다.이전에는 vue 인스턴스를 바인딩할 수 있었지만 vue에서는 더 이상 이 작업을 수행할 수 없습니다.
vue에서 계산된 변수를 사용하는 배경색을 동적으로 업데이트하고 싶습니다.
편집: 데모를 위해 코드 스니펫 추가
var app = new Vue({
el: '#app',
data: {
color: '#666666'
},
computed: {
backgroundColor: function() {
return {
'background-color': this.color
}
}
},
methods: {
toggleBackground: function() {
if(this.color=='#666666'){
this.color = '#BDBDBD'
} else {
this.color = '#666666'
}
}
}
})<script src="https://vuejs.org/js/vue.min.js"></script>
<html>
<body>
<div id="app" :style="backgroundColor">
<div>
lots of content...
</div>
<button @click="toggleBackground"> Click to toggle </button>
</div>
</body>
</html>정말 스타일링을 해야 한다면body플레인 자바스크립트를 사용하여 실행할 필요가 있습니다.watcher간단한 예는 다음과 같습니다.
본체와 외부 용기를 스크롤하지 않도록 함으로써 오버스크롤 효과를 물리칠 수 있어야 합니다.그 안에 스크롤 가능한 용기를 넣으세요.오버스크롤을 하면 바깥쪽 통이 보이겠죠?
에 구속되지 않는 이유body(React의 경우이지만 Vue에 적용됩니다)
뭐가 문제야? 다들 업데이트 해!비[Vue] 코드를 가지고 있는 사람도 있습니다.Google Font Loader는 단 1초라도 즐겁게 요소를 몸에 넣을 수 있으며, 그 사이에 최고 수준의 업데이트를 시도하면 앱이 끔찍하고 설명할 수 없을 정도로 망가질 것입니다.모든 서드파티 스크립트가 무엇을 하고 있는지 정말 알고 계십니까?광고나 소셜 네트워크 SDK는 어떻습니까?
new Vue({
el: '#app',
data: {
isRed: false
},
watch: {
isRed() {
document.querySelector('body').style.backgroundColor = this.isRed ? 'red' : null;
}
}
});#app {
background-color: white;
margin: 3rem;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<input type="checkbox" v-model="isRed">
</div>jQuery/querySelector를 사용하는 것보다 더 나은 솔루션을 찾은 것 같습니다.
태그 스타일은 Vue 템플릿에 바로 추가할 수 있습니다.그리고 여기에 v-if를 추가합니다. smth는 다음과 같습니다.
<style v-if="true">
body {
background: green;
}
</style>
따라서 이 v-if에서 계산/방법을 사용할 수 있으며 필요할 때 항상 DOM이 업데이트됩니다.
이것이 누군가에게 도움이 되기를 바랍니다;)
UPD: 템플릿에서 "style" 태그를 사용하는 것이 가장 좋은 방법은 아니지만 v-style 구성 요소를 만들 수 있습니다. 그러면 문제가 없습니다.vuejs 템플릿 내에서 스타일 태그를 사용하고 데이터 모델에서 업데이트
마이 스니펫:
Vue.component('v-style', {
render: function (createElement) {
return createElement('style', this.$slots.default)
}
});
new Vue({
el: '#app',
data: {
isRed: false,
color: 'yellow',
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" v-model="isRed">
<v-style v-if="isRed">
body {
background: red; /*one more benefit - you can write "background: {{color}};" (computed)*/
}
</v-style>
</div>언급URL : https://stackoverflow.com/questions/48172814/how-to-compute-styles-on-body-or-html-using-vue-js
'programing' 카테고리의 다른 글
| 정적 라이브러리와 공유 라이브러리의 차이점 (0) | 2022.07.08 |
|---|---|
| C에서 /dev/random 또는 urandom을 사용하는 방법 (0) | 2022.07.08 |
| 파이 차트가 완전히 렌더링되지 않음 (0) | 2022.07.08 |
| POSIX 스레드 및 신호 (0) | 2022.07.08 |
| C에서 "함수에 대한 충돌 유형"을 얻을 수 있습니다. 이유는 무엇입니까? (0) | 2022.07.08 |