vue 컨텍스트에서 getElementsByClassName
vue.js의 경우 getElementsByClassName은 어떻게 작동합니까?
아래 코드 조각이 있습니다.목표는 버튼을 클릭하여 vue.js 메서드를 사용하여h1 태그의 색상을 녹색으로 변경하는 것입니다.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 class="main-header">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
colorChange: function() {
// what do I do here...?
}
}
})
</script>
</body>
</html>
Vue는 가상 DOM을 사용하여 반응하는 것과 같으며 사용자가 직접 수정하지 않는 것으로 알고 있습니다.
물론 바닐라 JS에서는 그렇게 하죠document.getElementsByClassName('main-header')[0].style.backgroundColor="green";하지만 Vue에서는 직관에 어긋나는 것 같아요
제가 너무 복잡해서 실제로 이렇게 하는 건가요?아니면 Vue가 이 문제를 해결하는 방법을 가지고 있습니까?https://vuejs.org/v2/guide/class-and-style.html을 보고 있는데 수업 바인딩 방법만 나와 있어요.저도 https://vuejs.org/v2/guide/events.html을 통해 읽고 있습니다만, 어떤 식으로든 요소를 타겟으로 하는 것에 대해 필요한 것을 찾는 데 어려움을 겪고 있습니다.
Vue 컨텍스트에서 요소를 선택 및/또는 수정하려면 어떻게 해야 합니까?
정답입니다.Vue에서는 DOM과 직접 대화하는 것은 직관에 반합니다.
다행히 데이터 속성에 바인딩하여 스타일 변경을 직접 적용할 수 있는 지침이 있습니다(클래스에서도 비슷한 작업을 수행할 수 있습니다).
<h1 class="main-header" v-bind:style="{ color: activeColor}">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
구성 요소에서 데이터 속성을 생성하고 버튼을 클릭하여 업데이트합니다.
data: {
message: 'Hello Vue!',
activeColor: 'red'
},
methods: {
colorChange: function() {
this.activeColor = 'green'
}
}
언급URL : https://stackoverflow.com/questions/53176101/getelementsbyclassname-in-context-of-vue
'programing' 카테고리의 다른 글
| 어떻게 메이븐에게 최신 버전의 종속성을 사용하도록 말할 수 있습니까? (0) | 2022.08.08 |
|---|---|
| Vuex: 저장 상태를 빈 어레이로 지우는 중 (0) | 2022.08.08 |
| Laravel Nova Tool에 Vuex를 추가하는 방법 (0) | 2022.08.08 |
| 디스패치 메서드가 저장할 변수를 전달하지 않음 (0) | 2022.08.08 |
| vue-route 변경 시 동적 가져오기 재평가 (0) | 2022.08.08 |