js：三国英雄归位，未来之星投票以及初尝vue

三国英雄归位

可以实现点击哪一张图片，就可以使用键盘移动那张图片。

批量操控多个元素可以将父元素采用流式布局flex，子元素相对定位
每个子元素都是相对于自身的初始位置，
每个子元素的left和top初始值都是0

.f1,.f2{
            /* 流式布局 */
            display: flex;
            /* 每个子元素均匀分布 */
            justify-content: space-around;
        }
        .f1>img{
            width: 200px;
            height: 300px;
            position: relative;

        }
        .f2{
            margin-top: 100px;
        }
        .f2>div{
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            text-align: center;
            line-height: 300px;
        }

js部分中使用到了数组存储6张图片的坐标，在调用移动函数时可以直接将图片的下标传进来，就可以通过下标获取到对应图片的坐标值了。

let pos={x:0,y:0}
    // 定义一个数组，存放6个对象，独立记录每个对象的运动坐标
    let arr=[{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0}]

    function move1(img,i){
        // pos表示当前正在操作的对象
        pos=arr[i]
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                    console.log('左')
                    pos.x-=5
                    img.style.left=pos.x+'px'
                    break;

                case 39:
                    console.log('右')
                    pos.x+=5
                    img.style.left=pos.x+'px'
                    break;

                case 38:
                    console.log('上')
                    pos.y-=5
                    img.style.top=pos.y+'px'
                    break;

                case 40:
                    console.log('下')
                    pos.y+=5
                    img.style.top=pos.y+'px'
                    break;
            }
        }
    }

未来之星投票

css代码如下，使用到了流式布局flex

.top{
            display: flex;
            justify-content: center;
        }
        .top>div{
            margin-left: 30px;
            text-align: center;
        }
        /* 第一个和第三个子元素向下移动30 */
        .top>div:nth-child(1),.top>div:nth-child(3){
            margin-top: 30px;
            text-align: center;
        }
        .top>div>span{
            color: goldenrod;
            font-size: large
        }
        img{
            width: 150px;
            height: 200px;
            border-radius: 10px;
        }
        img:hover{
            box-shadow: 5px 5px 5px rebeccapurple;
            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: rebeccapurple;
            font-size: large;
            color: aliceblue;
        }
        button:hover{
            box-shadow: 0 8px 5px rgb(124, 87, 160);
        }
        button:active{
            box-shadow: 0 3px 5px rgb(124, 87, 160);
            transform: translateY(5px);
        }

js代码如下，其中数组的复制可以直接使用let beauty2=[…beauty]

let beauty=[
        {name:'a.webp',num:0},{name:'b.webp',num:0},{name:'c.jpeg',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',num:0}
    ]
    // 自动根据数组中的数据，自动生成图片到页面
    let main=document.getElementById('main')
    function flushImg(){
        let s=''
        beauty.forEach((e,i)=>{
            s+=`
            <div>
            <img src="../img/imgs/${e.name}" alt=""><br>
            <span>${e.name.slice(0,e.name.indexOf('.'))}--${e.num}</span><br>
            <button οnclick="vote(${i})">投票</button>
        </div>
        `
        main.innerHTML=s
        })
    }
    flushImg()
    // 投票函数
    function vote(i){
        beauty[i].num++
        // 刷新主体（数组中的数据）
        flushImg()
        // 更新前三甲
        updateTOP3()
    }
    let tops=document.getElementById('top')
    function updateTOP3(){

        let beauty2=[...beauty]

        beauty2=beauty2.sort((e1,e2)=>{
            // 倒序
            return e2.num-e1.num
        })
        // 取数组前3个对象
        beauty2=beauty2.slice(0,3)
        tops.innerHTML=`
        <div>
            <img src="../img/imgs/${beauty2[1].name}" alt=""><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}" alt=""><br>
            <span>状元</span><br>
            ${beauty2[0].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[0].num}
        </div>
        <div>
            <img src="../img/imgs/${beauty2[2].name}" alt=""><br>
            <span>探花</span><br>
            ${beauty2[2].name.slice(0,beauty2[2].name.indexOf('.'))}--${beauty2[2].num}
        </div>
        `
    }

效果如下：

Vue

插值表达式{{}}，读取vue中data里面的数据,应用于文本范围
v-for标签属性，用来循环遍历数组，e in arr
e是数组arr中的每一个元素

v-bind绑定某个属性，让属性中读取data中的数据，通常简写为:value
v-model:value双向绑定，可以读取，也可以改变data中的数据，
通常简写为v-model，只是应用于表单项input标签

<div id="app">
        <p>大家好，我是{{person.name}}，我今年{{person.age}}岁了</p>
        <p>
            厚溥的分公司地点有：
            <ul>
                <li v-for="(hp,i) in hpList">
                    {{hp}}--{{i}}
                </li>
            </ul>
            普通的循环：
            <ul>
                <li v-for="i in 10">
                    {{i}}
                </li>
            </ul>
        </p>
        <h3>单向绑定</h3>
        <input type="text" name="" id="" v-bind:value="person.name" placeholder="请输入姓名">
        <input type="text" name="" id="" :value="person.age" placeholder="请输入姓名"><br>

        <h3>双向绑定</h3>
        <input type="text" name="" id="" v-model:value="person.name" placeholder="请输入姓名">
        <input type="text" name="" id="" v-model="person.age" placeholder="请输入姓名"><br>
    </div>