作业-VUE

作业一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="app">

    <div :style="div_style"></div>
    <div>
        <button v-on:click="changeColor('red')">{{ red }}</button>
        <button v-on:click="changeColor('yellow')">{{ yellow }}</button>
        <button v-on:click="changeColor('blue')">{{ blue }}</button>
    </div>
</div>


</body>
<script src="Vue/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            div_style: {
                width: "200px",
                height: "200px",
                backgroundColor: "black"
            },
            red: '点击变红',
            yellow: '点击变黄',
            blue: '点击变蓝',
        },
        methods: {
            changeColor(c) {
                this.div_style.backgroundColor = c;
            }
        }
    })
</script>
</html>

作业二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<div id="app">
    <form action="#" style="margin: 20px;">
        <p @click="tag" :style="{width: w,height: h, backgroundColor: bgc}"></p>
    </form>
</div>

</body>
<script src="Vue/vue.js"></script>
<script>
    let num = 0;
    new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'yellow'
            },
        methods:{
            tag () {

                num += 1;
                if (num==1){
                    this.bgc = 'pink'
                }else {if (num==2){
                    this.bgc = 'green'
                }else {
                    this.bgc = 'cyan';
                    num = 0;
                    console.log(num)
                }}

            }

        }
    });

</script>

</html>

猜你喜欢