案例:Vue.js案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Vue 测试实例 - W3xue教程(w3xue.com)</title>
6
</head>
7
<style>
8
.cssclass{
9
  background: #000;
10
  color: #fff;
11
}
12
</style>
13
<body>
14
<script src="//unpkg.com/vue/dist/vue.js"></script>
15
16
<div id="app">
17
  <label for="r1">修改颜色</label><input type="checkbox" v-model="vueclass" id="r1">
18
  <br><br>
19
  <div v-bind:class="{'cssclass': vueclass}">
20
    w3xue教程网-w3xue.com
21
  </div>
22
</div>
23
    
24
<script>
25
new Vue({
26
    el: '#app',
27
  data:{
28
    vueclass: false
29
  }
30
});
31
</script>
32
</body>
33
</html>