vue 01

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            height:100px;
            width:100px;
        }
    </style>
</head>
<body>
<div >
    <div>
        <button @click="changeColor('red')">红色</button>
        <button @click="changeColor('yellow')">黄色</button>
        <button @click="changeColor('blue')">蓝色</button>
    </div>
    <div class="box" :style="{backgroundColor:bgColor}"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        bgColor:'black',
    },
    methods:{
        changeColor(color) {
            this.bgColor = color;
        },
    }
})
</script>
</html>

2.有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap {
            height: 200px;
            width: 200px;
            background-color: black;
            border: 3px solid red;
            color:white;
            font:bold 50px/200px 'STSong';
            text-align: center;
            /*cursor: crosshair;*/  /* 十字架*/
            /*cursor: help;;   !*箭头旁边带一个问号*!*/
            /*cursor: wait	;  !* 动态旋转的一个圆圈*!*/
            cursor: text	;  /* 此光标指示文本*/
            user-select:none;  /*文本不能被选中*/
        }
    </style>
</head>
<body>
<div >
    <div class="wrap" @click="actionFn" :style="{backgroundColor:bgColor}">{{ counter }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            counter:0,
            colorArr:['cyan','pink','green',]
        },
        methods:{
          actionFn() {
              this.counter ++;
              this.bgColor = this.colorArr[this.counter % 3]
          },
          }
    })
</script>
</html>

3.如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin:50px auto 0;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
        }
        .b1 {
            background-color: red;
            position: absolute;
        }
        .b2 {
            background-color: green;
            position: absolute;
        }
        .left {
            width: 100px;
            height: 200px;
            left: 0;
        }
        .right {
            width: 100px;
            height: 200px;
            right: 0;
        }
        .top {
            width: 200px;
            height: 100px;
            top: 0;
        }
        .bottom {
            width: 200px;
            height: 100px;
            bottom: 0;
        }
    </style>
</head>
<body>
<div >
    <div class="box" @click="roll">
        <div class="b1" :class="c1"></div>
        <div class="b2" :class="c2"></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 1,
            c1: 'left',
            c2: 'right',
            c1Arr: ['left', 'top', 'right', 'bottom'],
            c2Arr: ['right', 'bottom', 'left', 'top']
        },
        methods: {
            roll() {
                let n = this.count++;
                this.c1 = this.c1Arr[n % 4];
                this.c2 = this.c2Arr[n % 4];
            }
        }
    });
    // 利用定时器自动旋转图像
    setInterval(function () {
        app.roll();
    }, 100)
</script>
</html>

以上是 vue 01 的全部内容， 来源链接： utcz.com/z/377461.html

回到顶部