空と君のあいだに：バージョン1

by m_kahmin

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div id="app" class="wrapper">
  <div class="container">
    <div class="py-2">
      <h1>君と空のあいだに</h1>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="form-group">
          <fieldset class="card mb-2">
            <div class="card-header">
              <h5>君</h5>
            </div>
            <div class="card-body">
              <div class="form-check">
                <label class="form-check-label">
                  <input v-model="kimi" type="radio" class="form-check-input" name="kimi" value="namida">
                  涙のとき
                </label>
              </div>
              <div class="form-check">
                <label>
                  <input v-model="kimi" type="radio" class="form-check-input" name="kimi" value="waratte">
                  笑ってくれる
                </label>
              </div>
            </div>
          </fieldset>
          <div class="card">
            <div class="card-header">
              <h5>僕</h5>
            </div>
            <div class="card-body">
              <span v-if="boku === 'poplar'">ポプラの枝になる</span>
              <span v-else>悪にでもなる</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Vue

const vue = new Vue({
	el: '#app',
  data() {
  	return {
    	'kimi': 'namida',
    };
  },
  computed: {
  	boku() {
    	return this.kimi === 'namida' ? 'poplar' : 'aku';
    },
  }
});