案例：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
</head>
8
<body>
9
<div id="app">
10
  <p>{{ site }}</p>
11
</div>
12
​
13
<script>
14
var vm = new Vue({
15
  el: '#app',
16
  data: {
17
    name: 'Google',
18
    url: '//www.google.com',
19
    site: 'google //www.google.com'
20
  },
21
  computed: {
22
    site: {
23
      // getter
24
      get: function () {
25
        return this.name + ' ' + this.url
26
      },
27
      // setter
28
      set: function (newValue) {
29
        var names = newValue.split(' ')
30
        this.name = names[0]
31
        this.url = names[names.length - 1]
32
      }
33
    }
34
  }
35
})
36
// 调用 setter， vm.name 和 vm.url 也会被对应更新
37
vm.site = 'W3xue教程 //www.w3xue.com';
38
document.write('name: ' + vm.name);
39
document.write('<br>');
40
document.write('url: ' + vm.url);
41
</script>
42
</body>
43
</html>