小白白成长历险记（第二天）-优快云博客

本文链接：https://blog.youkuaiyun.com/wjl1327702292/article/details/131605698

一、前言

二、今日代码（一）

三、今日代码（二）

四、每日小结

前言

代码框框敲，脑袋天天焦。今天是小白白的第二天，今日练习js小案例、vue：

未来之星

今日代码（一）

未来之星

css样式

<style>
        .top{
            display: flex;
            justify-content: center;
        }
        .top>div{
            margin-left: 30px;
            text-align: center;
        }
        .top>div>span{
            color: red;
            font-size: large;
        }
        .top>div:nth-child(1){
            margin-top: 30px;
        }
        .top>div:nth-child(3){
            margin-top: 50px;
        }
        img{
            width: 150px;
            height: 200px;
            border-radius: 50%;
        }
        img:hover{
            box-shadow: 5px 5px 5px pink;
            transform: translate(5px,5px);
        }
        /*主体部分布局*/
        .main{
            display: flex;
            justify-content: space-around;
            /*自动换行*/
            flex-wrap: wrap;
        }
        .main>div{
            text-align: center;
            margin-left: 30px;
            margin-top: 20px;
        }
        .main button{
            width: 90px;
            height: 40px;
            border-radius: 10px;
            border: none;
            background-color: aqua;
            font-size: large;
            color: rgb(255, 0, 162);
        }
        button:hover{
            box-shadow: 0 8px 5px pink;
        }
        button:active{
            transform: translateY(5px);
            box-shadow: 0 3px 5px pink;
        }
    </style>

主体部分

<h1 style="text-align: center;color: rgb(255, 0, 162);">未来之心前三甲</h1>
    <div class="top" id="top">
        
    </div>
    <hr>
    <div class="main" id="main">
        
    </div>

js部分

<script>
    let beauty=[{num:0,name:'a.webp'},{num:0,name:'b.webp'},
{num:0,name:'c.webp'},{num:0,name:'d.webp'},
{num:0,name:'e.webp'},{num:0,name:'f.webp'},
{num:0,name:'g.webp'},{num:0,name:'h.webp'},
{num:0,name:'i.webp'},{num:0,name:'j.webp'},
{num:0,name:'k.webp'},{num:0,name:'l.webp'}]
    //根据数组中的数据，自动生成图
    let main=document.getElementById('main')
    function flushImg(){
        let s=''
        beauty.forEach((e,i)=>{
            s+=`
            <div>
                <img src="./img/imgs/${e.name}"><br>
                <span>${e.name.slice(0,e.name.indexOf('.'))}
                --${e.num}</span><br>
                <button onclick="vote(${i})">投票</button>
            </div>`
        })
        main.innerHTML=s
    }
    //调用函数
    flushImg()
    //投票函数
    function vote(i){
        beauty[i].num++
        flushImg()
        top3()
    }
    let t=document.getElementById('top')
    //前三甲函数
    function top3(){
        //拷贝原数组排序
        let beauty2=[...beauty]
        beauty2.sort((e1,e2)=>{
            return e2.num-e1.num
        })
        //取前三
        beauty2=beauty2.slice(0,3)
        t.innerHTML=`
        <div>
            <img src="./img/imgs/${beauty2[1].name}" ><br>
            <span>榜眼</span><br>
            ${beauty2[1].name.slice(0,beauty2[1].name.indexOf('.'))}
            --${beauty2[1].num}
        </div>
        <div>
            <img src="./img/imgs/${beauty2[0].name}" ><br>
            <span>状元</span><br>
            ${beauty2[0].name.slice(0,beauty2[0].name.indexOf('.'))}
            --${beauty2[0].num}
        </div>
        <div>
            <img src="./img/imgs/${beauty2[2].name}" ><br>
            <span>探花</span><br>
            ${beauty2[2].name.slice(0,beauty2[2].name.indexOf('.'))}
            --${beauty2[2].num}
        </div>`
    }
    top3()
</script>

今日代码（二）

vue知识点

vue框架

<script src="./js/vue.min.js"></script>


<body>
    <div id="app">
    <div>
</body>


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

插值表达式 {{}} 读取vue中data里面的数据

<p>大家好，我是{{person.name}},我今年{{person.age}}岁了</p>

v-for标签属性，循环遍历数组，e in arr

e是数组arr的每个元素

<ul>
    <li v-for="(hp,i) in hplist">
        {{hp}}--{{i+1}}
    </li>
</ul>

v-bind:value绑定某个属性，让属性中读取data中的数据,通常简写成 :value

<input type="text" name="" id="" v-bind:value="person.name" placeholder="请输入">
<input type="text" name="" id="" :value="person.age" placeholder="请输入">

v-model:value双向绑定，可以读取，也可以改变data中的数据，通常简写成 v-model

<input type="text" name="" id="" v-model:value="person.name">
<input type="text" name="" id="" v-model="person.age">

每日小结

坚持就是胜利，又新增知识了。在写代码时，需要清晰的思维逻辑，时时刻刻要知道自己写什么，下一步写什么；需要一个良好的代码习惯，美观换行，取名明了，注释简洁了当，写一个不熟悉代码时，注明意思，写一个了解的代码，注明作用。