2021-06-10 种花

最新推荐文章于 2024-06-19 15:46:35 发布

我也不知道为什么但是它可以运行

最新推荐文章于 2024-06-19 15:46:35 发布

阅读量53

点赞数

分类专栏： vue 文章标签： vue.js

看看就行多练练就会了加油哦

本文链接：https://blog.csdn.net/weixin_44437201/article/details/117790738

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>种花</title>
    <style>
    .flower {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .flower div {
        position: absolute;
        width: 10px;
        height: 10px;
        border:3px solid #000;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    </style>
</head>
<body>
<div
    class="flower"
    @click="add"
>
    <div
        v-for="(d, i) in list"
        :key="i"
        :style="getStyle(d, i)"
    ></div>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
    el: '.flower',
    data: {
        list: []
    },
    methods: {
        getRandomColor() {
            const c = () => Math.floor(Math.random() * 255);
            return `rgb(${c()}, ${c()}, ${c()})`;
        },
        getStyle(obj, idx) {
            return {
                top: obj.top + 'px',
                left: obj.left + 'px',
                width: (10 + idx * 2) + 'px',
                height: (10 + idx * 2) + 'px',
                background: obj.background
            };
        },
        add(event) {
            const { clientX, clientY } = event;
            this.list.push({
                top: clientY,
                left: clientX,
                background: this.getRandomColor()
            });
        }
    }
});
</script>
</body>
</html>

我也不知道为什么但是它可以运行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-10 种花

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>种花</title> <style> .flower { position:.
复制链接

扫一扫