Vue2：实例：事件绑定、样式绑定、class绑定、style绑定、条件渲染、循环渲染

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>

<body>
    <style>
        .box1 {
            background-color: green;
            width: 300px;
            height: 300px;
        }

        .box2 {
            background-color: lawngreen;
            width: 200px;
            height: 200px;
        }

        .box3 {
            background-color: greenyellow;
            width: 100px;
            height: 100px;
        }

        .meta {
            background-color: black;
            width: 300px;
            height: 100px;
            color: aqua;
        }

        .meta2 {
            background-color: rgb(129, 129, 129);
            width: 300px;
            height: 100px;
            color: aqua;
        }

        button {
            width: 200px;
            height: 20px;
        }

        .lastbox {
            border-radius: 30px;
            text-align: center;
        }
    </style>
    <div class="content">
        <!-- 事件绑定 -->
        <h1>事件绑定</h1>
        <div class="box1" v-on:click="onbox1">{{box1}}
            <div class="box2" v-on:click="onbox2">{{box2}}
                <div class="box3" v-on:click="onbox3">{{box3}}
                </div>
            </div>
        </div>

        <!-- class绑定 -->
        <h1>class绑定</h1>
        <button @click="btn">{{tip}}</button>
        <div :class="{meta:m}"></div>
        <div :class="['lastbox',mode]">111111</div>

        <!-- style绑定 -->
        <h1>style绑定</h1>
        <div v-bind:style="{backgroundColor:bgcColor,color:txtColor,fontSize:txtFont+'px'}">
            {{text}}
        </div>
        <div :style="[box4,{backgroundColor:'lawngreen',display:d}]"></div>

        <h1>条件渲染</h1>
        <button @click="change">{{btnchange}}</button>
        <div v-if="flag">{{iF}}</div>
        <div v-show="flag">{{show}}</div>

        <h1>循环渲染</h1>
        <div v-for="ele in arr">
            <div :style="{width:'20px',height:'20px',borderRadius:'50%',backgroundColor:bC1}">
                {{ele.tip}}
            </div>
            <div :style="{width:'30px',height:'30px',borderRadius:'50%',backgroundColor:bC2}">
                {{ele.colorname}}
            </div>
            <div :style="{width:'50px',height:'50px',borderRadius:'50%',backgroundColor:bC3}">
                {{ele.cname}}
            </div>
        </div>
    </div>
    <script>
        let option = {
            el: ".content",
            data: {
                box1: "box1",
                box2: "box2",
                box3: "box3",
                m: true,
                mode: "meta",
                flag: true,
                tip: "点击",
                text: "一段文字",
                txtColor: "green",
                txtFont: 30,
                box4: {
                    width: "200px",
                    height: "20px",
                },
                d: "block",
                bgcColor: "green",
                btnchange: "点击产生条件渲染效果",
                iF: "v-if:删除节点",
                show: "v-show:display:none",
                arr: [{
                    tip: "1",
                    colorname: "green",
                    cname: "绿色"
                },
                {
                    tip: "2",
                    colorname: "lawngreen",
                    cname: "荧光绿"
                },
                {
                    tip: "3",
                    colorname: "greenyellow",
                    cname: "黄绿色"
                }],
                bC1:"green",
                bC2: "lawngreen",
                bC3:"greenyellow"
            },
            methods: {
                onbox1() { console.log("box1"); },
                onbox2() { console.log("box2"); },
                onbox3() { console.log("box3"); },
                btn() {
                    this.flag = !this.flag;
                    if (this.flag) {
                        //true
                        this.mode = "meta";
                        this.d = "block"
                        this.bgcColor = "green"
                        console.log("true");
                    } else {
                        this.mode = "meta2";
                        this.d = "none"
                        this.bgcColor = "darkgreen"
                        console.log("false");
                    }
                },
                change() {
                    this.flag = !this.flag;
                }
            },
        }
        var vm = new Vue(option)
        // console.log(vm, option.data, vm == option.data)

    </script>
</body>

</html>
posted on 2022-08-31 09:30 香香鲲阅读(136) 评论(0) 收藏举报