作业

Osinghong5天前成果展示29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
     <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }


      body {
        background-color: #f0f2f5;
        color: #333;
        line-height: 1.6;
        padding: 20px;
      }


      #app {
        max-width: 800px;
        margin: 0 auto;
      }


      .container {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
      }


      header {
        background: linear-gradient(135deg, #42b983 0%, #359469 100%);
        color: white;
        padding: 30px 20px;
        text-align: center;
      }


      .subtitle {
        font-size: 1.1rem;
        opacity: 0.9;
        margin-top: 8px;
        font-weight: 400;
      }


      .content {
        padding: 30px 20px;
      }


      .demo-area {
        text-align: center;
        padding: 20px;
      }


      .display-box {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 40px 20px;
        margin-bottom: 30px;
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
      }


      .message {
        font-size: 2rem;
        font-weight: 600;
        color: #359469;
        transition: all 0.3s ease;
      }


      .button-group {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
      }


      button {
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
      }


      button:nth-child(1) {
        background-color: #42b983;
        color: white;
      }


      button:nth-child(2) {
        background-color: #3b82f6;
        color: white;
      }


      button:nth-child(3) {
        background-color: #f59e0b;
        color: white;
      }


      button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }


      button:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }


      @media (max-width: 600px) {
        .button-group {
          flex-direction: column;
          align-items: center;
        }
        
        button {
          width: 80%;
        }
        
        .message {
          font-size: 1.5rem;
        }
      }


      .display-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #d0d7dc;
      }


      .display-box:hover .message {
        color: #2d7d52;
        transform: scale(1.05);
      }


      button:hover:nth-child(1) {
        background-color: #359469;
      }


      button:hover:nth-child(2) {
        background-color: #2563eb;
      }


      button:hover:nth-child(3) {
        background-color: #d97706;
      }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
             <header>
                <h1>Vue.js v-on 和 v-show 课堂练习</h1>
                <p class="subtitle">学习事件处理和条件渲染</p>
            </header>


            <div class="content">
                
                <div class="demo-area">
                    <div class="display-box">
                        <p class="message" v-show="isVisible">Arknights</p>
                        <p class="message" v-show="!isVisible">Blue Archive</p>
                    </div>


                    <div class="button-group">
                        <button v-on:click="showMessage">《明日方舟》</button>
                        <button @click="hideMessage">《蔚蓝档案》</button>
                        <button @click="toggleMessage">切换游戏</button>
                    </div>
                </div>


               
        </div>
    </div>


    <script>
         const { createApp, ref } = Vue;
        
        createApp({
            setup() {
                const isVisible = ref(true);
                
                const showMessage = () => {
                    isVisible.value = true;
                };
                
                const hideMessage = () => {
                    isVisible.value = false;
                };
                
                const toggleMessage = () => {
                    isVisible.value = !isVisible.value;
                };
                
                return {
                    isVisible,
                    showMessage,
                    hideMessage,
                    toggleMessage
                };
            }
        }).mount("#app");
    </script>
</body>
</html>

打赏