案例：Vue.js案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Vue 测试实例 - W3xue教程(w3xue.com)</title>
6
<script src="//unpkg.com/vue/dist/vue.js"></script>
7
<style>
8
.active {
9
    width: 100px;
10
    height: 100px;
11
    background: green;
12
}
13
.text-danger {
14
    background: red;
15
}
16
</style>
17
</head>
18
<body>
19
<div id="app">
20
  <div v-bind:class="classObject"></div>
21
</div>
22
​
23
<script>
24
new Vue({
25
  el: '#app',
26
  data: {
27
  isActive: true,
28
  error: null
29
  },
30
  computed: {
31
    classObject: function () {
32
      return {
33
        active: this.isActive && !this.error,
34
        'text-danger': this.error && this.error.type === 'fatal',
35
      }
36
    }
37
  }
38
})
39
</script>
40
</body>
41
</html>