在 vue.js 的上下文中，getElementsByClassName 是如何工作的？
我有下面的代码片段 - 目标是单击按钮并使用 vue.js 方法将 h1 标签的颜色更改为绿色：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/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 https://v2.vuejs.org/v2/guide/class-and-style.html但它只是解释了如何绑定类。我也在读https://v2.vuejs.org/v2/guide/events.html https://v2.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'
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
