Vue 小練習01

時間 2019-12-17

標籤 vue 練習简体版

原文原文鏈接

有紅, 黃, 藍三個按鈕, 以及一個200X200px的矩形box, 點擊不一樣的按鈕, box的顏色會被切換爲指定的顏色

<!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的矩形box, 點擊box自己, 記錄點擊次數, 1次box變爲粉色, 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。