vue 上下文中的 getElementsByClassName [英] getElementsByClassName in context of vue
问题描述
在 vue.js 上下文中，getElementsByClassName 是如何工作的?
我有以下代码片段 - 目标是单击一个按钮并使用 vue.js 方法将 h1 标签的颜色更改为绿色:
<头><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><身体><div id="应用程序"><h1 class="main-header">{{ message }}</h1><button v-on:click="colorChange">点击我</button><脚本>var app = new Vue({el: '#app',数据: {消息:你好，Vue！"},方法: {颜色变化:函数(){//我在这里做什么...?}}})</html>
据我所知，Vue 就像带有虚拟 DOM 的 React，您不能直接修改它.
显然，在 vanilla 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 交互是违反直觉的.
幸运的是，有一个指令允许您通过绑定到数据属性来直接应用样式更改.(请记住，您也可以对类执行类似的操作).
{{ message }}
<button v-on:click="colorChange">点击我</button>在您的组件中，创建一个数据属性并在单击按钮时更新它:
数据:{消息:'你好 Vue！',活动颜色:'红色'},方法: {颜色变化:函数(){this.activeColor = '绿色'}}In the context of vue.js, how does getElementsByClassName work?
I have the following snippet of code below - the goal is to click a button and change the color of the h1 tag to green using vue.js methods:
<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>
It's to my understanding that Vue is like React with a virtual DOM and you don't modify it directly.
Obviously in vanilla JS you just do document.getElementsByClassName('main-header')[0].style.backgroundColor="green"; but that seems counterintuitive in Vue.
Am I overcomplicating this and is this in fact how it works? Or does Vue have a specific way of handling this? I've been looking at https://vuejs.org/v2/guide/class-and-style.html but it just explains how to bind classes. I'm also reading through https://vuejs.org/v2/guide/events.html but I'm having a hard time finding what I need in regards to targeting an element/modifying it in some way...
How do you select and/or modify an element in the context of Vue?
You are correct. In Vue, interacting directly with the DOM is counter-intuitive.
Fortunately, there is a directive that allows you to apply style changes directly by binding to a data property. (Keep in mind, you could do something similar with a class as well).
<h1 class="main-header" v-bind:style="{ color: activeColor}">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
In your component, create a data property and update it on button click:
data: {
message: 'Hello Vue!',
activeColor: 'red'
},
methods: {
colorChange: function() {
this.activeColor = 'green'
}
}
这篇关于vue 上下文中的 getElementsByClassName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
