【vue小练习】

是瑶妹儿

已于 2023-11-07 13:43:28 修改

阅读量60

点赞数

分类专栏： vue小练习文章标签： vue.js javascript 前端

于 2023-10-25 20:19:41 首次发布

本文链接：https://blog.csdn.net/qq_47168657/article/details/134042555

版权

vue小练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

练习以及源代码

练习1
练习2
练习3
练习1源代码
练习2源代码
练习3源代码

练习1

一、使用 table 表格的方式渲染出如下学生成绩信息，其中成绩>=90，显示“优秀"；80<=成绩<90，显示“良好"，60<=成绩<80，显示及格；成绩<60，显示“不及格"。成绩大于等于90 分的学员，背景使用“#7DB3FA"高亮显

参考效果图
在这里插入图片描述

练习2

商城列表渲染在这里插入图片描述

练习3

实现选项卡切换
在这里插入图片描述

练习1源代码

<!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>
    <!-- 引入vue -->
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            border: 2px solid orange;
            margin: 100px auto;
            border-spacing: 0;
            text-align: center;
            width: 600px;
        }
        .bg {
            background-color: #7DB3FA;
        }
        td{
            height: 40px;
             border-bottom: 1px solid rgb(221, 221, 221);
             border-right: 1px solid rgb(221, 221, 221);
        }
    </style>
</head>

<body>
    <table id="app">
        <!-- 循环针对谁，就在对应的标签上使用v-for指令 不要下标可以省略 -->
        <tr>
            <td style="width:10%">id</td>
            <td style="width:25%">姓名</td>
            <td style="width:20%">姓别</td>
            <td style="width:20%">成绩</td>
            <td style="width:25%">等级</td>
        </tr>
        <tr v-for="item in student" :class="[item.score>=90?'bg': '']">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.score}}</td>
            <td>
                <p v-if="item.score >= 90">优秀</p>
                <p v-else-if="item.score >= 80">良好</p>
                <p v-else-if="item.score >= 60">及格</p>
                <p v-else>不及格</p>
            </td>
        </tr>
    </table>

    <script>
        new Vue({
            el: "#app",
            data: {
                student: [
                    { id: 1, name: '诸葛亮', sex: '男', score: 98 },
                    { id: 2, name: '周瑜', sex: '男', score: 88 },
                    { id: 3, name: '刘阿斗', sex: '男', score: 50 },
                    { id: 4, name: '曹植', sex: '男', score: 90 },
                    { id: 5, name: '张飞', sex: '男', score: 70 },
                    { id: 6, name: '曹丕', sex: '男', score: 55 }
                ]
            }
        })
    </script>
</body>
</html>

练习2源代码

<!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>
    <!-- 引入vue -->
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        h3{
            border-left: 5px solid #000;
            padding-left: 3px;
        }

        #app {
            width: 1000px;
            height: 630px;
            background-color: rgb(206, 205, 205);
            margin: 20px auto;
        }

        .tp {
            margin-top: 20px;
            margin-right: 20px;
            float: left;
        }

        ul {
            list-style: none;
            width: 740px;
            float: left;
             margin-top: 20px;
        }

        ul li {
            float: left;
            height: 274px;
            margin-right: 20px;
            margin-bottom: 10px;
            background-color: #fff;
            text-align: center;
        }
        ul li img{width: 165px;}
        .red{
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>潮电酷玩 ELECTRONICS</h3>
        <img src="素材/imgs/01.jpg" alt="" class="tp">
        <ul>
            <li v-for="item in goods">
                <img :src="item.img" alt="">
                <p>{{item.text}}</p>
                <p class="red">{{item.price}}</p>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                goods: [{
                    id: 1,
                    img: "素材/imgs/02.jpg",
                    text: "我是商品描述",
                    price: 99.8
                },
                {
                    id: 2,
                    img: "素材/imgs/03.jpg",
                    text: "我是商品描述",
                    price: 299
                },
                {
                    id: 3,
                    img: "素材/imgs/04.jpg",
                    text: "我是商品描述",
                    price: 4799
                },
                {
                    id: 4,
                    img: "素材/imgs/05.jpg",
                    text: "我是商品描述",
                    price: 219
                },
                {
                    id: 5,
                    img: "素材/imgs/06.jpg",
                    text: "我是商品描述",
                    price: 198
                },
                {
                    id: 6,
                    img: "素材/imgs/07.jpg",
                    text: "我是商品描述",
                    price: 97
                },
                {
                    id: 7,
                    img: "素材/imgs/08.jpg",
                    text: "我是商品描述",
                    price: 98
                },
                {
                    id: 8,
                    img: "素材/imgs/09.jpg",
                    text: "我是商品描述",
                    price: 128
                }
                ]
            }
        })
    </script>
</body>
</html>

练习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>
    <!-- 引入vue -->
    <script src="./vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .title{
            height: 40px;
        }
        .title li{
            float: left;
            width: 100px;
            background: #ccc;
            line-height: 40px;
            text-align: center;
        }
        .title .active{
            background: teal;
            color: #fff;
        }
        #app div{
            width: 300px;
            height: 300px;
            background: teal;
            color: #fff;
            display: none;
        }
        #app .show{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 定义挂载点 -->
    <div id="app">
        <ul class="title">
            <li v-for="(item,index) in titles" :key="index" :class="[ n==index ?'active':'']" @click=" n = index">{{item}}</li>
        </ul>
        <div v-for="(item,index) in contents" :key="index" :class="[ n==index ?'show':'']">{{item}}</div>
    </div>

    <script>
        //实例化vue
        new Vue({
            //挂载点
            el:"#app",
        
            //data:model(数据模型)--页面所需的数据
            data:{
                n:0, //记录当前对应的菜单下标
                titles:["放假","回来","回家"],
                contents:["国庆加中秋放8天","放假回来连续上7天","回家补课8天"]
            },
            //methods:方法  需要使用的函数
            methods:{}
        })
    </script>
</body>
</html>