Vueの小さな実践01

赤、黄、青ボタン、及び200X200pxの長方形のボックスは、異なるボタンをクリックし、ボックスの色は、指定色に切り替えられます

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

</head>
<body>
<div id="d1">

   <p :style="myStyle"></p>

   <button :style="{backgroundColor: bgc1}" @click="f1">按钮一</button>
   <button :style="{backgroundColor: bgc2}" @click="f2">按钮二</button>
   <button :style="{backgroundColor: bgc3}" @click="f3">按钮三</button>
</div>

<script src="vue/vue.js"></script>
<script>
   new Vue({
       el: '#d1',
       data: {
           bgc1: 'red',
           bgc2: 'yellow',
           bgc3: 'blue',
           myStyle: {
               width: '200px',
               height: '200px',
               backgroundColor: 'black'
           }
       },
       methods: {
           f1() {
               this.myStyle.backgroundColor = this.bgc1
           },
           f2() {
               this.myStyle.backgroundColor = this.bgc2
           },
           f3() {
               this.myStyle.backgroundColor = this.bgc3
           },
       }
   })
</script>


</body>
</html>

長方形の箱の200X200px、1ボックスターンピンク、ボックス自体に記録クリックをクリックして、2グリーンには、青に3回、4回ピンクに戻り、等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="d1">

    <p :style="myStyle" @click="f1">{{ counter }}</p>


</div>

<script src="vue/vue.js"></script>
<script>
    new Vue({
        el: '#d1',
        data: {
            counter: 0,
            bgc1: 'pink',
            bgc2: 'green',
            bgc3: 'cyan',
            myStyle: {
                width: '200px',
                height: '200px',
                backgroundColor: 'black'
            }
        },
        methods: {
            f1() {
                this.counter += 1;
                if (this.counter % 3 === 1) {
                    this.myStyle.backgroundColor = this.bgc1
                }else if (this.counter % 3 === 2) {
                    this.myStyle.backgroundColor = this.bgc2
                }else {
                    this.myStyle.backgroundColor = this.bgc3
                }
            }
        }
    })
</script>


</body>
</html>

おすすめ