<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js - Florian Studio</title> </head> <style> .class1{ background: #444; color: #eee; } </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> <p>チェックボックス：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>複数のチェックボックス：</p> <input type="checkbox" id="ceodata" value="ceodata" v-model="checkedNames"> <label for="runoob">ceodata</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="yahoo" value="yahoo" v-model="checkedNames"> <label for="yahoo">yahoo</label> <br> <span>選択値: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script> </body>