复习Vue7：条件渲染 v-if v-show

复习Vue7：条件渲染 v-if v-show

v-if和v-show指令可以用来控制元素的显示和隐藏

下面，我们先来看一下v-if的应用

这里还是对永辉数据进行判断。

    <div id="app">
      <p v-if="users.length===0">没有任何用户数据</p>

      <ul v-else>
        <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
        <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
        <!-- index表示数组的索引值，该名字可以随意定义 -->
        <!-- <li
          v-for="(item,index) in users"
          :key="item.id"
          :class="{actived:selectItem===item}"
          @mousemove="selectItem=item"
        >
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li> -->

        <li
          v-for="(item,index) in users"
          :key="item.id"
          :style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}"
          @mousemove="selectItem=item"
        >
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li>
      </ul>
    </div>

在上面的代码中，我们首先对users数组做了一个判断，如果没有数据，就在页面上展示：“没有任何用户数据”

否则渲染整个列表。

上面是关于v-if的使用 ,下面看一下v-show

v-show是通过css属性display控制元素的显示，元素总数纯在的。

v-if：通过控制dom来控制元素的显示和隐藏，如果一开始条件为false，元素是不存在的。

什么时候使用v-if,什么时候使用v-show呢？

如果需要频繁的控制元素的显示与隐藏，建议使用v-show，从而避免大量的DOM操作，提高性能。

而如果摸个元素满足条件后，渲染到页面中，并且以后变化比较少，可以使用v-if