Welcome aboard! We are happy you are here and wish you good net-raft!
<html>
<head>
<title>VueJs</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/project/little1/sl_JzfwgQ8Jtu202121663/file.css">
</head>
<body class="text-center body"
v-class="body-on: lights, body-off: !lights">
<button v-on="click: flipSwitch"
v-class="btn-danger: lights, btn-success: !lights"
class="btn">
<span class="fa fa-power-off"></span>
</button>
<script type = "text/javascript">
new Vue({
el: 'body',
data: {
lights: true
},
methods: {
flipSwitch: function() {
this.lights = !this.lights;
}
}
});
</script>
</body>
</html>
The most helpful VUE.JS solutions