Vue

by black_horse

HTML

<div id="app">
  <div
       class="box"
       :class="isRounded ? 'box-rounded' : ''"
       :style="'background-color:' + box.color"
       v-for="(box, index) in boxes"
       :key="index"
       >
    <input class="full-width" v-model="box.inputData" />
    <div class="box-output">{{ box.outputData }}</div>
  </div>
  <div class="clearfix"></div>
  <div>
    <input type="checkbox" v-model="isRounded" /><label>Rounded Box</label>
  </div>
</div>

CSS

.clearfix{
  clear: both;
}
.full-width{
  width:100%;
}
input {
  background: transparent;
  text-decoration: underline;
  color: white;
  border: none;
  text-align: center;
  font-size:30px;
}
.box {
  float:left;
  color: white;
  width: 24%;
  margin-right: 1%;
  padding: 20px;
  background: blue;
  height: 100px;
}
.box-output {
  width: 100%;
  text-align: center;
  font-size:30px;
}
.box-rounded {
  border-radius: 50px;
}

Vue

new Vue({
  el: "#app",
  data: {
    isRounded: false,
      boxes: [
        {
          inputData: "",
          outputData: "",
          color: "green",
          operation: "uppercase"
        },
        {
          inputData: "",
          outputData: "",
          color: "red",
          operation: "feeling"
        },
        {
          inputData: "",
          outputData: "",
          color: "blue",
          operation: "multiple"
        }
      ],
      feeling: {
        good: ["happy", "joyful", "calm"],
        bad: ["sad", "mad", "depressed"]
      }
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  },
  watch: {
    boxes: {
      deep: true,
      immediate: true,
      handler: function(val) {
        this.boxes.map(box => {
          if (box.operation === "uppercase")
            box.outputData = box.inputData.toUpperCase();
          else if (box.operation === "feeling") {
            box.outputData = this.feeling.good.includes(box.inputData)
              ? "GOOD"
              : this.feeling.bad.includes(box.inputData)
              ? "BAD"
              : "";
          } else if (box.operation === "multiple") {
            if (box.inputData == "") box.outputData = "";
            else box.outputData = parseInt(box.inputData) * 2;
          }
        });
      }
    }
  },
  mounted() {
    for (var i = 0; i < this.numBox; i++) {
      this.boxValue[i] = "";
      this.bxData[i] = "";
    }
  },
})