Vue作业(实现比较数字大小，实现导航栏)

y17757773039

已于 2022-10-16 18:00:16 修改

阅读量1.8k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-10-16 17:29:19 首次发布

本文链接：https://blog.csdn.net/y17757773039/article/details/127350305

版权

1、比较数字大小

    <div id="app">
        <input type="number" v-model:value="count01"><span>{{jugle}}</span><input type="number" v-model="count02">
    </div>
    <script>
        var vm=new Vue({
            el: '#app',
            data:{
                count01:0,
                count02:0,
            },
            computed:{
                jugle(){
                    if(this.count01>this.count02){
                        return '>'
                    }else if(this.count01<this.count02){
                        return '<'
                    }else{
                        return '='
                    }              
                }
            }
        })
    </script>

实现效果：
在这里插入图片描述

2、导航栏

css部分

    <style>
        div{
            margin: 0;
            padding: 0;
        }
        ul{
            font-size: 0;
            text-align: center;
            list-style: none;
        }
        li{
            padding: 30px;
            width: 70px;
            background-color: rgb(38, 148, 175);
            font-size: 15px;
            color: white;
            display: inline-block;
            cursor: pointer;
        }
        li:hover{
            background-color: rgb(202, 135, 157);
        }
        .clickRed{
            background-color: palevioletred;
        }
    </style>

h5+script部分

 <div id="app">
        <my-header></my-header>
    </div>

    <template id="header">
        <div>
            <ul>
                <li v-for="item in items" v-bind:class="item.clickRed" @click.self="click(item.name)">{{item.name}}</li>
            </ul>
        </div>
    </template>
    
    <script>
        Vue.component('my-header',{
            template:'#header',
            data(){
                return{
                    items:[{name:"音乐",clickRed:''},{name:"体育",clickRed:''},{name:"影视",clickRed:''},{name:"图片",clickRed:''}]
                }
            },
            methods:{
                click(name){
                //清空class
                    this.items.some((item)=>{
                        item.clickRed=''
                    })
                    //当前元素赋予class
                    this.items.some((item)=>{ 
                        if(name==item.name){
                            return item.clickRed='clickRed'
                        }
                    })
                }
            }
        })

        var vm=new Vue({
            el: '#app',
        })
    </script>

实现效果：
在这里插入图片描述
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>立体导航栏</title>
        <link rel="stylesheet" href="./style.css" type="text/css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
             *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Popins",sans-serif;
        }
        .container{
            background: #ffbdc9;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        nav{
            background: #fff;
            border-radius: 50px;
            padding: 10px;
            box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
        }
        nav ul li{
            list-style: none;
            display: inline-block;
            padding: 13px 35px;
            margin: 10px;
            font-size: 18px;
            font-weight: 500;
            color: #777;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: color 0.5s;
        }
        nav ul li::after{
            content: "";
            background: #f44566;
            width: 100%;
            height: 100%;
            border-radius: 30px;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: -1;
            opacity: 0;
            transition: top 0.5s,opacity 0.5s;
        }
        nav ul li:hover{
            color: #fff;
        }
        nav ul li:hover::after{
            top: 50%;
            opacity: 1;
        }
        </style>
       
        
        
    </head>
    <body>
        <div class="container">
            <nav>
                <ul>
                    <li>音乐</li>
                    <li>体育</li>
                    <li>影视</li>
                    <li>图片</li>
                </ul>
            </nav>
        </div>
    </body>
</html>