Question

我使用vue.js创建了一个交通信号灯，但是它不起作用。它应根据持续时间显示颜色（红色，黄色和绿色）。我错过了一个问题吗？

CSS

#screen {
width: 450px;
height: 740px;
background: #222; 
border-radius: 12px;
margin: auto;
padding: 23px;
}

.light {
    width: 230px;
    height: 270px;
    display: inline-block;
    opacity: 0.2;
    border-radius: 100%;
    transition: opacity 10s;
    margin-bottom: 12px;
}

.active {
    opacity: 1;
}
.red {
    background: red;
}

.yellow {
    background: yellow;
}

.green {
    background: green;
}

我的HTMl 我已经创建了div。


<div id="screen">
<div id="light red"  :class="{active: now=='red'}"></div>
<div id="light yellow"  :class="{active: now=='yellow'}"></div>
<div id="light green"  :class="{active: now=='green'}"></div>
</div>

这是vue.js 似乎一切就绪，控制台未发送任何错误。但是我还是不明白，为什么它不起作用？

class State {
  constructor(name, dur, next){
    this.name = name;
    this.dur = dur;
    this.next = next;
  }
}

class Constroller {
  trigger(state, callback){
    callback(state);
    setTimeout(()=>{
      this.trigger(state.next, callback);
    }, state.dur * 10)
  }
}


var app = new Vue({
el: '#screen', 
  data:{
    now: 'red'
  },
  mounted(){
    var constroller = new Constroller();

    var red = new State('red', 2);
    var yellowRed = new State('yellow', 1);
    var yellowGreen = new State('yellow', 1);
    var green = new State('green', 3);

    red.next = yellowRed;
    yellowR.next = green;
    green.next = yellowGreen;
    yellowG.next = red;

    constroller.trigger(red, (state)=>{
      this.now = state.name;
    });

  }
})

我错过了什么吗？我应该重写我的函数吗？

Answer 1

这里有些错误：

<div id="light red"  :class="{active: now=='red'}"></div>
<div id="light yellow"  :class="{active: now=='yellow'}"></div>
<div id="light green"  :class="{active: now=='green'}"></div>

应该是类而不是id。

var red = new State('red', 2);
var yellowRed = new State('yellow', 1);
var yellowGreen = new State('yellow', 1);
var green = new State('green', 3);

red.next = yellowRed;
yellowR.next = green;
green.next = yellowGreen;
yellowG.next = red;

您命名了yellowRed和yellowGreen，但随后使用了yellowR和YellowG

无论如何，我在这里https://jsfiddle.net/Lo50j4rw/做了一个小提琴，您可以查看一下，我还调整了一些持续时间的东西。
另外，至少在我国，红色：D

Answer 2

您的主要问题是您使用id来代替HTML light元素，而应该使用class。您也有奇怪的计时选择：每盏灯的持续时间都很短，但过渡时间只有10秒。

修复这些问题，您会得到：

class State {
  constructor(name, dur, next) {
    this.name = name;
    this.dur = dur;
    this.next = next;
  }
}

class Constroller {
  trigger(state, callback) {
    callback(state);
    setTimeout(() => {
      this.trigger(state.next, callback);
    }, state.dur * 1000)
  }
}

new Vue({
  el: '#screen',
  data: {
    now: 'red'
  },
  mounted() {
    var constroller = new Constroller();

    var red = new State('red', 2);
    var yellowRed = new State('yellow', 1);
    var yellowGreen = new State('yellow', 1);
    var green = new State('green', 3);

    red.next = yellowRed;
    yellowRed.next = green;
    green.next = yellowGreen;
    yellowGreen.next = red;

    constroller.trigger(red, (state) => {
      this.now = state.name;
    });

  }
})

#screen {
width: 450px;
height: 740px;
background: #222; 
border-radius: 12px;
margin: auto;
padding: 23px;
}

.light {
    width: 230px;
    height: 270px;
    display: inline-block;
    opacity: 0.2;
    border-radius: 100%;
    transition: opacity 0.3s;
    margin-bottom: 12px;
    background-color: white;
}

.active {
    opacity: 1;
}
.red {
    background: red;
}

.yellow {
    background: yellow;
}

.green {
    background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="screen">
  <div class="light red" :class="{active: now=='red'}"></div>
  <div class="light yellow" :class="{active: now=='yellow'}"></div>
  <div class="light green" :class="{active: now=='green'}"></div>
</div>

vue.js上的交通灯不起作用，如何解决？

2 个答案: