夜光带你走进Vue.js（十）擅长的领域

夜光序言：

 

如果你信我，就请你把憋着的泪水，尽情在我面前滴落。如果你信我，就请在所有的无助时辰，遥望星河，看看那些因你失色的星星，一颗一颗。
谢谢你啊，出现在我的生活，让我知道，单枪匹马一个人，也可以面对浩浩荡荡的大军，厮杀为独一无二的常胜将军。让人有勇气，有力量...

 

 

 

 

 

正文：

 

v-if 与 v-show 的区别？

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。

 

v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。

 

因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

 

---

 

循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

 

<template>
  <div id="app">

    <ol>
      <li v-for="site in sites">
        {{site.name}}
      </li>
    </ol>

  </div>
</template>
<script>
  export default{
    data(){
      return{
        type:'C',
        s:'yeguang',
        sites:[
          {name:'xiaoyan'},
          {name:'muchen'},
          {name:'yeguang'}
        ]
      }
    },
    methods:{

    }
  }
</script>
<style>

</style>

 

 

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：