遨翔在知识的海洋里----vue(一)

v-for @click 显示隐藏

<template>
  <section class="course-body">
    <header class="body-top">
      <div class="top-center">
        <p>
          <i>
            <</i>
              <span>
                <i>2017</i>年
                <i>10</i>月</span>
              <i>></i>
        </p>
        <select>
          <option value="班级">班级</option>
          <option value="班级1">班级1</option>
        </select>
      </div>
      <div class="top-right">
        <span>班级总数:3</span>
        <span>课程总数:52</span>
      </div>
    </header>
    <table class="body-middle app-table">
      <thead>
        <tr>
          <th>时间</th>
          <th>班级</th>
          <th>课程讲义</th>
          <th>课堂测验</th>
          <th>课后作业</th>
        </tr>
      </thead>
      <tbody>
        <!-- 循环测试开始 -->
        <tr v-for="(item,index) in testData" :key="item.id">
          <td>{{item.time}}</td>
          <td>{{item.class}}</td>
          <td class="td-hover-dialog">
            <span>{{item.leture}}</span>
            <div @click="dialogToggleBtn(index)" class="hover-btn">

              <span></span>
            </div>
            <!-- 点击后弹出的框框 -->
            <ul v-show="dialogBox && (cIndex == index) " class="hover-dialog">
                <!--v-show要为true才显示  &&并且-->
                <!--1. dialogBox = false && (-1 == 0) false  =>  false-->
                <!--点击-->
                <!--2. dialogBox = true && (0 == 0 )  true   => true-->
                <!--再点-->
                <!--dialogBox = false && (0 == 0) true => false-->

              <li class="dialog-item">禁用</li>
              <li class="dialog-item">编辑</li>
              <li class="dialog-item">删除</li>
            </ul>
          </td>
          <td>
            <router-link to="/teaching/lessonPaperPreview">
              {{item.test}}
            </router-link>
          </td>
          <td>{{item.homework}}</td>
        </tr>
        <!-- 循环测试结束 -->
        
      </tbody>
    </table>
    <com-page></com-page>
  </section>
</template>

<script>
import comPage from "../../../components/comPage";
export default {
    components: {
        comPage
    },
    data() {
        return {
            dialogBox: false,
            cIndex: -1,
            testData: [
                {
                    time: "8:00-9:00",
                    class: "二年级A班",
                    leture: "圆的专题复习",
                    test: "课堂没",
                    homework: "作业"
                },
                {
                    time: "8:00-9:00",
                    class: "二年级B班",
                    leture: "圆的专题复习",
                    test: "课堂没",
                    homework: "作业"
                },
                {
                    time: "8:00-9:00",
                    class: "二年级C班",
                    leture: "圆的专题复习",
                    test: "课堂没",
                    homework: "作业"
                },
                {
                    time: "8:00-9:00",
                    class: "二年级D班",
                    leture: "圆的专题复习",
                    test: "课堂没",
                    homework: "作业"
                }
            ]
        };
    },
    methods: {
        dialogToggleBtn(index) {
            this.dialogBox = !this.dialogBox;
            this.cIndex = index;
        }
    }
};
</script>

<style>

</style>