• VUE:class与style强制绑定


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .aClass{
                    color:red;
                }
                .bClass{
                    color:blue;
                }
                .cClass{
                    font-size: 30px;
                }
            </style>
        </head>
        <body>
            <!--
                1.理解
                    在应用界面中,某个(些)元素的样式是变化的
                    class/style绑定就是专门用来实现动态样式效果的技术
                2.class绑定:class='xxx'
                    xxx是字符串
                    xxx是对象
                    xxx是数组
                3.style绑定
                    :style="{color: activeColor,fontSize: fontSize+'px'}"
                    其中activiColor/fontSize是data属性
            -->
            
            <div id="app">
                <h2>1.class绑定::class='xxx'</h2>
                <p class="cClass" :class="a">xxx是字符串</p>
                <p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
                <p :class="['aClass','cClass']">xxx是数组</p>
                <h2>2.style绑定</h2>
                <p :style="{color: activeColor,fontSize: fontSize+'px'}">:style="{color: activeColor,fontSize: fontSize+'px'}"</p>
                <button @click="update">更新</button>
            </div>
            <script type="text/javascript" src="../js/vue.js" ></script>
            <script>
                new Vue({
                    el:"#app",
                    data:{
                        a:'aClass',
                        isA:true,
                        isB:false,
                        activeColor:'red',
                        fontSize:20
                    },
                    methods:{
                        update(){
                            this.a='bClass',
                            this.isA=false,
                            this.isB=true,
                            this.activeColor='green';
                            this.fontSize=30
                        }
                    }
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    提取Word中的标题以及做标记的内容
    洪水暴发时怎么办?
    面朝大海,春暖花开
    洪水过后要注意哪些事项?
    JS判断客户端是否是iOS或者Android
    关于取消网页接口请求的一些思考
    gkENGINE渲染优化
    RMI拓展
    序列化和反序列化
    cve20201938/cve202010487
  • 原文地址:https://www.cnblogs.com/it-taosir/p/9886995.html
Copyright © 2020-2023  润新知