vue指令 v-show v-if v-for

1、条件渲染指令v-show v-if

1.1v-show是通过改变样式来控制显示效果

<div v-show="isShow">测试v-show</div>

1.2v-if是通过移除添加结构来控制显示效果

<div v-if="isShow">测试v-if</div>

v-if一般通过和v-else-if v-else来一起使用

<div v-if="num<=18">18-</div>
<div v-else-if="num<=50">50-</div>
<div v-else>50+</div>

1.3案例

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <!-- 1.绑定点击事件 -->
        <span class="btn" @click="isShow=!isShow">
          {{isShow?'收起':'展开'}}
        </span>
      </div>
      <!-- 2. v-show配合变量来控制标签隐藏出现 -->
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>

 2、v-for循环渲染指令

循环的时候需要加key 对应的值如果有id使用id 没有id用index

key的值的选择条件：固定+唯一

2、1循环数组

<div v-for="(item, index) in arr" :key="index">
  {{ item }} {{ index }}
</div>

2、2循环数组对象

<div v-for="item in arr2" :key="item.id">
  <div>{{ item.id }}</div>
  <div>{{ item.name }}</div>
  <div>{{ item.age }}</div>
</div>

2、3循环对象

<div v-for="(value, key) in obj" :key="key">
  <div>{{ key }}--{{ value }}</div>
</div>

2、4循环字符串

<div>
  <div v-for="(item, index) in str" :key="index">{{ item }}</div>
</div>

2、5循环1-100

<div>
  <div v-for="i in 100" :key="i">{{ i }}</div>
</div>