Vue

by fergmux

HTML

<div id="app">
  <h2>Comparison:</h2>
  <select v-model="select1">
    <option v-for="option in options" :value="option.value">{{ option.label }}</option>
  </select>
  <select v-model="select2">
    <option v-for="option in options" :value="option.value">{{ option.label }}</option>
  </select>

  <table>
    <tr>
      <th>
      </th>
      <th>
        Equal
      </th>
      <th>
        Not Equal
      </th>
    </tr>
    <tr>
      <td>
        Double
      </td>
      <td>
        {{ equal }}
      </td>
      <td>
        {{ notequal }}
      </td>
    </tr>
    <tr>
      <td>
        Triple
      </td>
      <td>
        {{ _equal }}
      </td>
      <td>
        {{ _notequal }}
      </td>
    </tr>
  </table>
  
</div>

SCSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  padding: 20px;
  transition: all 0.2s;
}
table {
  margin-top: 30px;
  
  th, td {
    border: 1px solid black;
    padding: 10px;
  }
  
  td:not(:first-child) {
    font-weight: 300;
  }
}
h2 {
  font-weight: bold;
  margin-bottom: 10px;
}

Vue

let values = [ true, false, 1, 0, undefined, null, 'hi', '', {} , [], [1]]
let labels = ['True', 'False', '1', '0', 'Undefined', 'Null', 'String', 'Empty string', 'Empty object', 'Empty array', "[1]"]

let options = []

for (var i = 0; i < values.length; i++) {
		options.push({
      label: labels[i],
      value: values[i]
    })
}


new Vue({
  el: "#app",
  data: {
    options: options,
    select1: true,
    select2: true,
  },
  computed: {
  	equal() {
    	return this.select1 == this.select2
    },
    notequal() {
    	return this.select1 != this.select2
    },
    _equal() {
    	return this.select1 === this.select2
    },
    _notequal() {
    	return this.select1 !== this.select2
    }
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})