在 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 的 React，您不能直接修改它。
显然，在普通 JS 中，您只需执行 document.getElementsByClassName('main-header')[0].style.backgroundColor="green"; 但这在 Vue 中似乎违反直觉。
我是不是把它过于复杂了，实际上它是这样工作的吗？或者 Vue 是否有特定的处理方式？我一直在看https://v2.vuejs.org/v2/guide/class-and-style.html但它只是解释了如何绑定(bind)类。我也在阅读 https://v2.vuejs.org/v2/guide/events.html但是我很难找到我需要的关于定位元素/以某种方式修改它的东西......
如何在 Vue 上下文中选择和/或修改元素？
最佳答案
你是对的。在 Vue 中，直接与 DOM 交互是违反直觉的。
幸运的是，有一个指令允许您通过绑定(bind)到数据属性来直接应用样式更改。 (请记住，您也可以对类执行类似的操作)。
<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'
}
}
关于javascript - vue 上下文中的 getElementsByClassName，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53176101/