Fatal编程技术网
  • javascript/
  • Javascript 在两种颜色之间切换vueJS

Javascript 在两种颜色之间切换vueJS

javascript vue.js

Javascript 在两种颜色之间切换vueJS,javascript,vue.js,Javascript,Vue.js,以下是我今天提出的上一个问题的后续内容： 现在我想修改代码，以便每次单击它时都能在两种颜色之间切换 我的第一次尝试是： <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .main-header {

以下是我今天提出的上一个问题的后续内容：

现在我想修改代码，以便每次单击它时都能在两种颜色之间切换

我的第一次尝试是：

<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>
但我不明白如何更改状态的值，因为Vue文档并没有真正解释它

单击按钮时在标题的两种不同颜色之间切换是最佳方式吗？或者，我试图与ifs等更接近？

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




.主标题{
颜色：#292c2e；
}
{{message}}
点击我
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”，
单击颜色：“”，
更改状态：false
},
方法：{
颜色更改：函数（）{
console.log（this.alteredState）；
if（this.alteredState）{
this.clickedColor='green'
this.alteredState=false；
}否则{
this.clickedColor='#000'
this.alteredState=true；
}
}
}
})

将
alteredState
设置为true，然后立即检查它是否为true——因此它始终为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'
（字符串）之间的区别。
我认为@Boussadjra-Brahim的答案有点“OK”，但我会稍微清理一下，并消除最初双击更改颜色的问题



var-app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”，
clickedColor:'红色'，//设置初始值；我使用红色，因此您可以看到不同的状态
改变状态：正确
},
方法：{
颜色更改：函数（）{
console.log（this.alteredState）；
如果（此.alteredState）{
this.clickedColor='green'
}否则{
this.clickedColor='#000'
}
//这是切换功能，所以可以
//每次单击按钮时切换状态
this.alteredState=！this.alteredState
}
}
})


/*您不需要此CSS，因为您可以使用：style设置颜色*/
/*.主标题{
颜色：#292c2e；
*/



{{message}}
点击我

答案很晚，但会帮助其他人实现一个完美的切换按钮



newvue({
el:“#应用程序”，
道具：{
残疾人士：{
类型：布尔型，
默认值：false
},
labelEnableText：{
类型：字符串，
默认值：“开”
},
labelDisableText：{
类型：字符串，
默认值：“关闭”
},
身份证：{
类型：字符串，
默认值：“主”
},
默认状态：{
类型：布尔型，
默认值：false
}
},
数据（）{
返回{
currentState:this.defaultState
}
},
计算：{
enableText（）{
返回此.labelEnableText；
},
disableText（）{
返回此.labelDisableText；
},
isActive（）{
返回此.currentState；
},
检查值：{
得到（）{
返回此.currentState
},
设置（新值）{
console.log（newValue）；
this.currentState=newValue；
}
}
}
})；


。切换按钮{
垂直对齐：中间对齐；
用户选择：无；
光标：指针；
}
.切换按钮输入[type=“checkbox”]{
不透明度：0；
位置：绝对位置；
宽度：1px；
高度：1px；
}
.切换按钮。切换开关{
显示：内联块；
高度：12px；
边界半径：6px；
宽度：40px；
背景：#BFCBD9；
长方体阴影：插入0 1px#BFCBD9；
位置：相对位置；
左边距：10px；
过渡：全部为0.25秒；
}
.切换按钮。切换开关：：之后，
.toggle__按钮。toggle__开关：：before{
内容：“；
位置：绝对位置；
显示：块；
高度：18px；
宽度：18px；
边界半径：50%；
左：0；
顶部：-3px；
变换：translateX（0）；
过渡：全部.25s三次贝塞尔（.5，-.6，-.5,1.6）；
}
.切换\按钮。切换\开关：：之后{
背景：#4d；
盒影：0 0 1px#666；
}
.toggle__按钮。toggle__开关：：before{
背景：#4d；
盒影：0.3pxRGBA（0,0,0,0.1）；
不透明度：0；
}
.激活。切换开关{
背景：adedcb；
盒影：插入0 0 1px#adedcb；
}
.active.toggle__开关：：在，
.active.toggle__开关：：之前{
转换：translateX（40px-18px）；
}
.active.toggle__开关：：之后{
左：23px；
背景：#53B883；
盒影：0 0 1px#53B883；
}



基本示例




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