使用v-bind动态加载内容

使用v-bind动态加载内容

v-bind简写：

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                    p{
                        width: 200px;
                        height: 200px;
                        background-color:yellow;

                    }
                    .red{
                        background: red;
                    }
                    .pink{
                        background: pink;
                    }
                    .blue{
                        background: blue;
                    }
                    /* 防止刷新是显示源码{{a}} */
                    [v-cloak]{
                        display: none;
                    }
                </style>
            </head>
            <body>
                <div id="app" v-cloak>
                    <!-- 随着a的变化背景色变 -->
                    <!-- <p :class="{ red:a>=2, pink:a>=6}"> -->
                    <!-- 随着宽带的增加相数增加 -->
                    <p :style="{width: a+'px'}" >
                        {{a}}
                    </p>
                    <button @click = "add">相数加1</button>
                </div>
                <script src="js/vue.min.js"></script>
                <script>
                    new Vue({
                        el:'#app',
                        data:{
                            a:0
                        },
                        methods:{
                            add(){
                                this.a++;
                            }
                        }
                    })
                </script>
            </body>
        </html>
posted @ 2022-05-19 15:40  爱豆技术部  阅读(44)  评论(0)    收藏  举报