vue学习-条件与循环

一.条件判断 v-if

例子1

<div id="app">
    <p v-if="seen">现在你看到我了</p>
      <h1>教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

例子2

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
例子3:v-show

<h1 v-show="ok">Hello!</h1>

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-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。

v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

二，循环语句 v-for

例子1：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

例子2：通过一个对象的属性来迭代数据


<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

也可以第二个参数为键名

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

第三个参数为索引

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

迭代整数：

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

迭代数组

<div id="app">
  <ul>
    <li v-for="n in [1,3,5]">
      {{ n }}
    </li>
  </ul>
</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>