深入理解Vue 的条件渲染和列表渲染

对象更新检测

由于现代JavaScript的限制，Vue无法检测属性添加或删除。 例如：

var exp=new Vue({
  data:{
    a:1
  }
})
vm.b=2 //模板内无响应

Vue是不允许动态地向已创建的实例添加新的根级属性的。这时候 Vue 提供了一个方法用来对对象添加属性：

Vue.set(object,key,value)

举个例子

var exp=new Vue({
  el:".exp",
  data:{
    obj:{
      me:"pureview",
      pet1:"dog",
      pet2:"cat",
      hobby:"games"
    }
  }
})

我们在控制台输入下面的代码，就可以看到模板内的数据进行了更新

Vue.set(exp.obj,"todo","eating")

除了添加属性，我们也可以进行删除操作

Vue.delete(exp.obj,"pet2")

显示过滤/排序结果

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

比如我们在一个数组中取其偶数

<div class="exp">
  <ul>
    <li v-for="n in numbers">{{n}}</li>
  </ul>
</div>
<script>
  var exp=new Vue({
    el:".exp",
    data:{
      num:[1,2,3,4,5,6,7,8,9,10]    },
    computed:{
      numbers:function(){
        return this.num.filter(function(num){
          return num%2===0
        })
      }
    }
  })
</script>

模板显示结果：

2
4
6
8
10

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：

<div class="exp">
  <ul>
    <li v-for="n in even(num)">{{n}}</li>
  </ul>
</div>
<script>
  var exp=new Vue({
    el:".exp",
    data:{
      num:[1,2,3,4,5,6,7,8,9,10]    },
    methods:{
      even:function(num){
        return num.filter(function(num){
          return num%2===0
        })
      }
    }
  })
</script>

结果是一样的

一段取值范围的 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

结果

1 2 3 4 5 6 7 8 9 10

v-for 在 < template > 上