vue条件渲染和列表渲染

• v-if
  指令用于条件性地渲染一块内容。只有返回true会被渲染。
  *若条件为false不被渲染

<h1 v-if="isvip">用户类型：vip</h1> 

• v-else
  表示v-if的“else块”

*v-else元素必须跟在v-if或者v-else-if元素的后面，
v-if和v-else中间不能有其他的元素，不能被识别

• v-else-if
  v-if的“else-if”块，可连续使用。

<div v-if ="type==A">A</div>
<div v-else-if ="type=B">B</div>
<div v-else="type=C">not a/b</div>

• v-show
  可用于条件展示元素

<h1 v-show="ok">hellowrold</h1>

v-show的元素始终会被渲染并保留在DOM中。

*v-if：不显示时将内容不渲染，如果内容已经显示，将其内容改为不显示，将内容直接去除DOM。
v-show：不显示时，就会改为display：none，但是会渲染在dom中。适合反复切换内容用。

• v-for
  循环普通数组
  v-for指令需要使用item in list形式的语法，其中list是原数据数组，item是被迭代的数组元素的别名

<div id=“app”>
  <p v-for=“item in list”>索引值:{{key}}— - - 每一项：{{item}}<p>
  <div>

循环对象数组
v-for支撑一个可选的第二个参数，即当前项的索引

<div id =“app”>
 <p v-for =“(user,item)in list”>id
:{{user.id}}- - - 每项：{{user.name}}- - -索引{{item}}<p>
</div>

*key使用时必须使用v-bind属性绑定

• v-for历遍对象

历遍一个对象的property

<ul id=”app”>
  <li v-for=”value in items”>
    {{value}}
  </li>
<ul>

new vue（{
  el：‘#app’，
  data：{
    items：{
      name：‘小明’，
      age：14，
    }
  }
}）

也可以提供第二个的参数为property名称（键名）

<div v-for =”value，name）in items”>
  {{name}}：{{value}}
</div>

*历遍时，会按照items.keys（）的结果遍历