propella/index.html

## index.html
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>


<div id="app">
    <div>Template: {{ message }}</div>
    <div v-bind:title="title">Please hover</div>
    <div>Condition:
        <span v-if="seen">Now you see me</span>
    </div>
    <ul>
        <li v-for="(place, index) in places" v-bind:key="place.id">
            {{index}}: {{ place.name }}
        </li>
    </ul>
    <div v-on:click="onClick">Event: {{ time }}</div>
    <input v-model="message"/>
    <div>Degree: <input v-model="degree"/></div>
    <div>Radian: <input v-model="radian"/></div>
    <select v-model="yesno">
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
    <img v-bind:src="yesnoImg"/>
</div>
<script>
 var app = new Vue({
     el: '#app',
     data: {
         message: 'Dynamic message',
         title: 'Hover message',
         seen: true,
         places: [
             { id: 'tower1', name: '通天閣' },
             { id: 'tower2', name: 'スカイツリー' },
         ],
         time: 'Click me',
         degree: 90,
         yesno: "yes",
         yesnoImg: "",
     },
     methods: {
         onClick: function(e) {
             this.time = new Date();
         }
     },
     computed: {
         radian: {
             get: function() {
                 return Math.PI * 2 * this.degree / 360
             },
             set: function(newValue) {
                 this.degree = 360 * newValue / (Math.PI * 2) ;
             }
         }
     },
     created: function() {
         this.yesno = "no";
     },
     watch: {
         yesno: async function(newValue, oldValue) {
             this.yesnoImg = "";
             const response = await fetch(`https://yesno.wtf/api?force=${this.yesno}`);
             const json = await response.json();
             this.yesnoImg = json.image;
         }
     },

 })
</script>

</body>
</html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>


	<div id="app">
	<div>Template: {{ message }}</div>
	<div v-bind:title="title">Please hover</div>
	<div>Condition:
	<span v-if="seen">Now you see me</span>
	</div>
	<ul>
	<li v-for="(place, index) in places" v-bind:key="place.id">
	{{index}}: {{ place.name }}
	</li>
	</ul>
	<div v-on:click="onClick">Event: {{ time }}</div>
	<input v-model="message"/>
	<div>Degree: <input v-model="degree"/></div>
	<div>Radian: <input v-model="radian"/></div>
	<select v-model="yesno">
	<option value="yes">Yes</option>
	<option value="no">No</option>
	</select>
	<img v-bind:src="yesnoImg"/>
	</div>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	message: 'Dynamic message',
	title: 'Hover message',
	seen: true,
	places: [
	{ id: 'tower1', name: '通天閣' },
	{ id: 'tower2', name: 'スカイツリー' },
	],
	time: 'Click me',
	degree: 90,
	yesno: "yes",
	yesnoImg: "",
	},
	methods: {
	onClick: function(e) {
	this.time = new Date();
	}
	},
	computed: {
	radian: {
	get: function() {
	return Math.PI * 2 * this.degree / 360
	},
	set: function(newValue) {
	this.degree = 360 * newValue / (Math.PI * 2) ;
	}
	}
	},
	created: function() {
	this.yesno = "no";
	},
	watch: {
	yesno: async function(newValue, oldValue) {
	this.yesnoImg = "";
	const response = await fetch(`https://yesno.wtf/api?force=${this.yesno}`);
	const json = await response.json();
	this.yesnoImg = json.image;
	}
	},

	})
	</script>

	</body>
	</html>