在两种颜色之间切换vueJS

时间：2018-11-06 20:22:51

标签： javascript vue.js

这是从今天开始我对上一个问题的跟踪：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文档并没有真正解释它。

单击按钮时在标题的两种不同颜色之间切换是最好的方法吗？还是我尝试了与ifs等进行的＃1尝试？

4 个答案:

答案 0 :(得分：0)

尝试删除条件块之前的this.alteredState = true;，然后通过单击也会更改alteredState值的按钮在黑色和绿色之间切换：

<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);
                 
                    if (this.alteredState ) {
                        this.clickedColor = 'green'
                        this.alteredState = false;
                    } else {
                        this.clickedColor = '#000'
                         this.alteredState = true;
                    }
                }
            }
        })
    </script>
    </body>
</html>

答案 1 :(得分：0)

您将alteredState设置为true，然后立即检查它是否为真-因此它始终为真。

根本没有理由使用您的alteredState变量；您可以根据当前颜色进行切换：

colorChange: function() {
  if (this.clickedColor == 'green') {
    this.clickedColor = '';
  } else {
    this.clickedColor = 'green'
  }
}

但是，如果您确实希望使用alteredState var，则需要基于切换状态进行设置，而不是每次都将其设置为true：

    colorChange: function() {
      if (this.alteredState) {
        this.clickedColor = 'green'
        this.alteredState = false;
      } else {
        this.clickedColor = ''
        this.alteredState = true;
      }
    }

还请注意true（布尔值）和'true'（字符串）之间的区别。

答案 2 :(得分：0)

我认为 @Boussadjra Brahim 的回答还可以，但是我会对其进行清理，并消除了最初的双击更改颜色的问题。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    clickedColor: 'red', // set the initial value; I used red, so you can see the different states
    alteredState: true
  },
  methods: {
    colorChange: function() {
      console.log(this.alteredState);

      if (this.alteredState) {
        this.clickedColor = 'green'
      } else {
        this.clickedColor = '#000'
      }
      // this is toggle function, so it's OK to
      // toggle the state every time the button is clicked
      this.alteredState = !this.alteredState
    }
  }
})
/* you don't need this CSS, as you set the color with :style */


/*.main-header {
    color: #292c2e;
*/
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <h1 class="main-header" :style="{color: clickedColor}">{{ message }}</h1>
  <button v-on:click="colorChange">Click me</button>
</div>

希望这对您有所帮助！ ：）

答案 3 :(得分：0)

答案很晚，但是将帮助其他人实现完美的切换按钮。

new Vue({
  el: '#app',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    labelEnableText: {
      type: String,
      default: 'On'
    },
    labelDisableText: {
      type: String,
      default: 'Off'
    },
    id: {
      type: String,
      default: 'primary'
    },
    defaultState: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentState: this.defaultState
    }
  },

  computed: {
    enableText() {
      return this.labelEnableText;
    },

    disableText() {
      return this.labelDisableText;
    },

    isActive() {
      return this.currentState;
    },

    checkedValue: {
      get() {
        return this.currentState
      },
      set(newValue) {
        console.log(newValue);
        this.currentState = newValue;
      }
    }
  }
});
.toggle__button {
    vertical-align: middle;
    user-select: none;
    cursor: pointer;
}
.toggle__button input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
}
.toggle__button .toggle__switch {
    display:inline-block;
    height:12px;
    border-radius:6px;
    width:40px;
    background: #BFCBD9;
    box-shadow: inset 0 0 1px #BFCBD9;
    position:relative;
    margin-left: 10px;
    transition: all .25s;
}

.toggle__button .toggle__switch::after, 
.toggle__button .toggle__switch::before {
    content: "";
    position: absolute;
    display: block;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    left: 0;
    top: -3px;
    transform: translateX(0);
    transition: all .25s cubic-bezier(.5, -.6, .5, 1.6);
}

.toggle__button .toggle__switch::after {
    background: #4D4D4D;
    box-shadow: 0 0 1px #666;
}
.toggle__button .toggle__switch::before {
    background: #4D4D4D;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
    opacity:0;
}

.active .toggle__switch {
    background: #adedcb;
    box-shadow: inset 0 0 1px #adedcb;
}

.active .toggle__switch::after,
.active .toggle__switch::before{
    transform:translateX(40px - 18px);
}

.active .toggle__switch::after {
    left: 23px;
    background: #53B883;
    box-shadow: 0 0 1px #53B883;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p><strong>Basic Example</strong></p>
  <label :for="id + '_button'" :class="{'active': isActive}" class="toggle__button">
    <span v-if="isActive" class="toggle__label" v-text="enableText"></span>
    <span v-if="! isActive" class="toggle__label" v-text="disableText"></span>

    <input type="checkbox" :disabled="disabled" :id="id + '_button'" v-model="checkedValue">
    <span class="toggle__switch"></span>
  </label>
</div>

查看更多详细信息https://webomnizz.com/create-toggle-switch-button-with-vue-js/

相关问题
最新问题