Skip to content

Instantly share code, notes, and snippets.

@gouf

gouf/app.js

Created December 31, 2016 10:05
Show Gist options
  • Save gouf/fdb077188fc8d8fca386d983686f2d43 to your computer and use it in GitHub Desktop.
Save gouf/fdb077188fc8d8fca386d983686f2d43 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js 入力された年数から、創立何年目かを表示させる
Raw
app.js
'use strict';
var app = new Vue({
el: '#app',
data: {
ESTABLISHMENT_YEAR: 1882,
inputYear: null,
MESSAGE: 'ここに創立経過年数が表示されます'
},
computed: {
sinceYear: function() {
if(!this.inputYear) { return this.MESSAGE; }
var calculatedYear = this.inputYear - this.ESTABLISHMENT_YEAR;
var message = ''.concat('○○大学が開校されてから', calculatedYear, '年です');
return message;
}
}
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 1882年に開校された大学が創立何年目か、年数の入力値をもとに表示させる -->
<div id="app">
<label for="year">年(西暦)</label>
<input id="year" type="text" v-model="inputYear">
<br>
<span>{{ sinceYear }}</span>
</div>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment