kaw*_*nah 4 javascript vue.js vuejs2
在 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，您不能直接修改它。
显然，在 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 交互是违反直觉的。
幸运的是，有一个指令允许您通过绑定到数据属性来直接应用样式更改。（请记住，您也可以对类做类似的事情）。
<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'
}
}
| 归档时间： |
|
| 查看次数： |
4603 次 |
| 最近记录： |