Vue条件渲染和列表渲染

  Vue中的渲染是对模板的处理。根据BOM+DOM+js的前端组成，Vue的渲染是Vue组件模板根据指令编译，然后挂载到DOM解构中的过程，无论是条件渲染还是列表渲染。

条件渲染相关的指令有：

v-if/v-else/v-else-if/v-show

v-show：组件挂载时就会渲染，css的dispaly属性会根据v-show的值发生变化，适合频繁隐藏/显示切换的HTML片段。

v-if：组件会根据v-if的值确定挂载时要不要渲染，如果为false则组件的HTML片段不会进入渲染过程。频繁隐藏/显示切换的HTML片段不适合使用它。

列表渲染的指令有：

v-for

v-for：有多种表现形式，但是有非常标准的推荐格式。

 
<template>
<button @click="increment">{{ count }}button>
<div v-for="item in list" :key="item">
        <span>{{ item }}span>
div>
<div v-if="currentState">Hello, World!div>
<div v-else>I am one!div>
template>
 
<style>
 
style>