当你没有使用到计算属性的依赖缓存的时候，可以使用定义方法来代替计算属性，在 methods 里定义一个方法可以实现相同的效果，甚至该方法还可以接受参数，使用起来更灵活。

<div id ="app">My Facesoho Application
    <p>原始数据：{{text}}</p>
    <!-- 注意，这里的reversedText是方法，所以要带()-->
    <p>变化后数据：{{reversedText()}}</p>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        text:'123,456',
    },
    methods:{
        reversedText: function(){
            return this.text.split(',').reverse().join(',');
        }
    },
});    
</script>

把代码改了改，应该可以体现 computer 属性“依赖缓存”的概念以及与 method 的差别。如下面代码，cnt 是独立于 vm 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值，以后再使用 reversedMessage 这个计算属性，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样。

var cnt=1;
var vm = new Vue({
  el: '#app',
  data: {
    message: 'facesoho!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  }
})

尝试一下 »

九九乘法是程序员的最爱:

<div id="app">
    <div v-for="n in 9">
        <b v-for="m in n">
            {{m}}*{{n}}={{m*n}}
        </b>
    </div>
</div>

尝试一下 »

遍历对象的时候可以处理嵌套。

<div id="app">
  <ul>
    <li v-for="(value,key,index) in object">
        <p v-if="typeof value !='object'">{{value}}....{{ index }}</p>
        <p v-else>{{key}}....{{index}}</p>
        <ul v-if="typeof value == 'object'">
            <li v-for="(value, key, index) in value">
                {{key}}:{{value}}....{{ index }}
            </li>
        </ul>
    </li>
  </ul>
</div>

尝试一下 »

不仅如此，在迭代属性输出的之前，v-for会对属性进行升序排序输出：

new Vue({
  el: '#app',
  data: {
    object: {
      2: '学的不仅是技术，更是梦想！',
      1: '小鸟启蒙',
      0: 'http://www.facesoho.com'
    }
  }
})

输出：

http://www.facesoho.com
小鸟启蒙
学的不仅是技术，更是梦想！