admin管理员组文章数量:1394778
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="/[email protected]/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 overplicating this and is this in fact how it works? Or does Vue have a specific way of handling this? I've been looking at .html but it just explains how to bind classes. I'm also reading through .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?
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/npm/[email protected]/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 overplicating 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://v2.vuejs/v2/guide/class-and-style.html but it just explains how to bind classes. I'm also reading through https://v2.vuejs/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?
Share Improve this question edited Jul 14, 2022 at 1:34 tony19 139k23 gold badges277 silver badges347 bronze badges asked Nov 6, 2018 at 16:33 kawnahkawnah 3,4348 gold badges64 silver badges116 bronze badges 1- you can always use refs if you're looking into interact with elements inside your ponent vue refs, – calmar Commented Nov 7, 2018 at 7:12
1 Answer
Reset to default 6You 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 ponent, create a data property and update it on button click:
data: {
message: 'Hello Vue!',
activeColor: 'red'
},
methods: {
colorChange: function() {
this.activeColor = 'green'
}
}
本文标签： javascriptgetElementsByClassName in context of vueStack Overflow
版权声明：本文标题：javascript - getElementsByClassName in context of vue - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744102585a2590932.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论