JavaScript案例+vue入门

JavaScript 未来之星三甲 示例

效果图展示

 代码展示：

CSS区块

<style>
        .top {
            display: flex;
            justify-content: center;
        }
 
        .top>div {
            margin-left: 30px;
        }
 
        .top>div>span {
            color: goldenrod;
            font-size: large;
        }
 
        .top>div:nth-child(1),
        .top div:nth-child(3) {
            margin-top: 30px;
        }
 
        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(173, 126, 221);
        }
 
        button:active {
            transform: translateY(5px);
            box-shadow: 0 3px 5px rgb(173, 126, 221);
        }
    </style>

HTML区块：

<h1 style="text-align: center;color: blueviolet;">未来之星前三甲</h1>
    <div class="top" id="top1">
        <div>
            <img src="../imgs/a.webp" /><br>
            <span>榜眼</span><br>
            张三--90
        </div>
        <div>
            <img src="../imgs/b.webp" /><br>
            <span>状元</span><br>
            李四d--9
        </div>
        <div>
            <img src="../imgs/c.jpeg" /><br>
            <span>探花</span><br>
            王五d--9
        </div>
    </div>
    <br>
    <div class="main" id="main">
        <div>
            <img src="../imgs/a.webp" /><br>
            <sapn>a--0</sapn><br>
            <button>投票</button>
        </div>
    </div>

JavaScript区块

<script>
    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="../imgs/${e.name}" /><br>
                             <sapn>${e.name.slice(0, e.name.indexOf('.'))}--${e.num}</sapn><br>
                            <button onclick="vote(${i})">投票</button>
        </div>`
        })
        main.innerHTML = s
    }
    //调用flushImg
    flushImg()
    //投票函数
    function vote(i) {
        beauty[i].num++
        //刷新主题 （数组中的数据）
        flushImg()
        //更新前三甲
        updateTop3()
    }
    let top1 = document.getElementById('top1')
    //更新前三甲
    function updateTop3() {
        //不能队员数组排序，把原数组拷贝一份，用来排序
        let beauty2=[...beauty]
        beauty2 = beauty2.sort((e1, e2) => {
            return e2.num - e1.num
        })
        //取数组前三个对象
        beauty2 = beauty2.slice(0, 3)
        top1.innerHTML =
            `<div>
            <img src="../imgs/${beauty2[1].name}" /><br>
            <span>榜眼</span><br>
            ${beauty2[1].name.slice(0,beauty2[1].name.indexOf('.'))}-- ${beauty2[1].num}
        </div>
        <div>
            <img src="../imgs/${beauty2[0].name}" /><br>
            <span>状元</span><br>
            ${beauty2[0].name.slice(0,beauty2[1].name.indexOf('.'))}-- ${beauty2[0].num}
        </div>
        <div>
            <img src="../imgs/${beauty2[2].name}" /><br>
            <span>探花</span><br>
            ${beauty2[2].name.slice(0,beauty2[1].name.indexOf('.'))}-- ${beauty2[2].num}
        </div>`
    }
</script>

vue入门

Vue.js 提供了一种简单的方式来将组件的数据绑定到 HTML 模板中。这可以通过插值、属性绑定、事件绑定和双向绑定等方式来实现。插值是将组件的数据插入到模板中的一种方式，可以使用双括号语法来实现。属性绑定是将组件的数据绑定到 HTML 元素的属性上，可以使用 v-bind 指令来实现。事件绑定是将组件的方法绑定到 HTML 元素的事件上，可以使用 v-on 指令来实现。双向绑定是将组件的数据和 HTML 元素的值双向绑定，可以使用 v-model 指令来实现。

        <h3>单向绑定</h3>
        <input type="text" :value="person.name" placeholder="请输入">
        <h3>双向绑定</h3>
        <input type="text" v-model="person.name" placeholder="请输入">