VUE前端应用开发课程实验------实验五

最新推荐文章于 2024-08-10 18:26:28 发布

又菜有爱写

最新推荐文章于 2024-08-10 18:26:28 发布

阅读量270

点赞数 1

分类专栏： vue实验文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/m0_54430913/article/details/131243224

版权

vue实验专栏收录该内容

7 篇文章 4 订阅

订阅专栏

该实验旨在掌握Vue.js中的组件创建，包括全局和局部组件，以及组件间的数据传递。通过实现选项卡切换展示不同电影列表，以及点击删除按钮移除电影条目，展示了prop传值和自定义事件的应用。实验代码中，组件用于渲染并处理电影列表，动态组件则根据选项卡的选择显示不同的电影类型列表。

摘要由CSDN通过智能技术生成

一、实验名称：

组件应用

二、实验目的

（1）掌握组件的创建方法（全局组件、局部组件）；

（2）重点学会组件之间的数据传递（prop传值、自定义事件）；

（3）学会动态组件的创建。

三、实验内容

运用组件的相关知识实现选项卡的切换，点击删除，删除相应电影，效果如下图。

四、实验源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      position: relative;
     
    }
    ul{
      list-style: none;
    }
    li{
      float: left;
      margin-left: 50px;
    }
    li:active{
      background-color: skyblue;
      color: white;
    }
    .tabs{
      position: absolute;
      top: 80px;
    }
    td{
      padding: 15px;
    }
  </style>
</head>
<body>
  <div id="box">
    <h2>电影排行</h2>
    <ul :class="current">
      <li class="hmovie" @click="current='hmovie'">热播</li>
      <li class="cmovie" @click="current='cmovie'">经典</li>
    </ul>
    <div class="tabs">
      <component :is="current" :list1="hb" :list2="classic"></component>
    </div>
  
  </div>


  <script type="text/JavaScript">
         new Vue({
          el:'#box',
          data() {
            return {
              current:'hmovie',
              hb:[
                {id:1,name:'终结者5',star:'阿诺德施瓦辛格'},
                {id:2,name:'飓风营救',star:'连姆尼森'},
                {id:3,name:'我是传奇',star:'威尔史密斯'},
                {id:4,name:'一线生机',star:'杰森斯坦森'},
                {id:5,name:'罗马假日',star:'格里高利派克'},
                {id:6,name:'史密斯夫妇',star:'布拉德皮特'},
                {id:7,name:'物业邂逅',star:'克里斯埃文斯'},
              ],
              classic:[
                {id:1,name:'机械师2:复活',star:'杰森斯坦森'},
                {id:2,name:'变形金刚',star:'希亚拉博夫'},
                {id:3,name:'暮光之城',star:'克里斯汀斯图尔特'},
                {id:4,name:'怦然心动',star:'玛德琳卡罗尔'},
                {id:5,name:'电话情缘',star:'杰西麦特卡尔菲'},
                {id:6,name:'超凡蜘蛛侠',star:'安德鲁加菲尔德'},
                {id:7,name:'雷神',star:'克里斯海姆斯沃斯'},
                
              ]
            }
          },
          components:{
            hmovie:{
              props:['list1'],
              methods: {
                del(id){
                 
                  this.list1.splice(id,1)
                }
              },
              template:`<div>
                <table>
                    <tr v-for="(item,id) in list1 " :key="id">
                      <td>{{item.id}}</td>
                      <td>{{item.name}}</td>
                      <td>{{item.star}}</td>
                      <td><button @click="del(id)">删除</button></td>
                    </tr>
                    
                 </table>
                </div>`
            },
            cmovie:{
              props:['list2'],
              methods: {
                del(id){
                  this.list2.splice(id,1)
                }
              },
              template:`<div>
                <table>
                    <tr v-for="(item,id) in list2">
                      <td>{{item.id}}</td>
                      <td>{{item.name}}</td>
                      <td>{{item.star}}</td>
                        <td><button @click="del(id)">删除</button></td>
                    </tr>
                 </table>
                </div>`
            }
          }

         })
  </script>
</body>
</html>