【发布时间】：2018-11-06 20:22:50
【问题描述】：
这是我从今天开始的上一个问题的后续：getElementsByClassName in context of vue
我现在想修改代码，以便每次单击时都会在两种颜色之间切换。
我的第一次尝试是这样的：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.main-header {
color: #292c2e;
}
</style>
</head>
<body>
<div id="app">
<h1 class="main-header" v-bind:style="{color: clickedColor}">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
clickedColor: '',
alteredState: false
},
methods: {
colorChange: function() {
console.log(this.alteredState);
this.alteredState = true;
if (this.alteredState == true) {
this.clickedColor = 'green'
this.alteredState = false;
} else {
this.clickedColor = ''
}
}
}
})
</script>
</body>
</html>
基本上我在这里的思考过程......我正在做（尝试）的是我有一个名为alteredState的第二个数据集 - 我最初将它设置为false。在更改颜色功能中，我将其设置为 true。将其设置为 true 后，我检查它是否为 true。如果是这样，请更改颜色并将其恢复为 false。我的期望是在第二次点击时，它会恢复为主要颜色，然后在第二次点击时它会恢复为绿色。
最终发生的是它变为绿色，然后无限期设置为 false 并且不会变回黑色。
怎么没用？
然后我了解了道具https://vuejs.org/v2/guide/components-props.html 并尝试了类似的方法（这似乎是朝着正确方向迈出的一步）：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.main-header {
color: #292c2e;
}
</style>
</head>
<body>
<div id="app">
<h1 class="main-header" v-bind:style="{color: clickedColor}">{{ message }}</h1>
<button v-on:click="colorChange">Click me</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
clickedColor: ''
},
state: {
alteredState: 'false'
},
methods: {
colorChange: function() {
this.clickedColor = 'green'
this.alteredState.setState = 'true'
}
}
})
</script>
</body>
</html>
但我不明白如何更改状态的值，因为 Vue 文档并没有真正解释它。
单击按钮时在标题的两种不同颜色之间切换是最好的方法吗？或者我是否更接近尝试 #1 的 ifs 等？
【问题讨论】：
标签： javascript vue.js