码迷,mamicode.com
首页 > 其他好文 > 详细

VUE:class与style强制绑定

时间:2018-11-01 11:53:14      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:src   click   eth   样式   实现   size   script   java   new   

<!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>

 

VUE:class与style强制绑定

标签:src   click   eth   样式   实现   size   script   java   new   

原文地址:https://www.cnblogs.com/it-taosir/p/9886995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!