前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue入门详解之绑定class和style样式

Vue入门详解之绑定class和style样式

作者头像
十月梦想
发布2018-10-09 15:17:25
1.3K0
发布2018-10-09 15:17:25
举报
文章被收录于专栏:十月梦想

绑定class

绑定class两种方式第一使用对象方式,第二使用数组方式进行绑定

对象方式

代码语言:javascript
复制
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .actived{
            color:hotpink;
        }
    </style>
</head>
<body>
<div id="app">
    <h1  :class="{actived:isActive}" @click="getCor">{{msg}}</h1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isActive:false,
            msg:"十月梦想"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })
</script>

如果isActive为真这绑定这个activedclass,我们绑定了一个click事件,点击后改变这个isClick取值,我们在style中定义了这个.actived的颜色可以使用不同class显示不同颜色!除了对象方式还有其他方式绑定吗?当然有!

数组方式

除了上述的对象方式绑定,还有一种就是数字方式绑定,我们只看关键的vue代码

代码语言:javascript
复制
var app=new Vue({
    el:"#app",
    data:{
        cls1:"btn",
        cls2:"btn-lg",
        cls3:"col-md",
        actived:"actived",
        isActive:false,
        msg:"十月梦想"
    },
    mounted:function(){
        console.log(this)
    },
    methods:{
        getCor:function (){
            this.isActive=!this.isActive
        }
    }

})

对代码简单解析,和对象方式不太一样,这个数组绑定可以传入多个,这个属性来自vue实例中的data,也可以传入一个三木运算符!

直接绑定style样式

上面通过两种方式绑定了class,间接改变了css样式!我们能否直接去改变这个style样式呢?答案当然是可行的!

其实绑定style样式,也是可以通过数组和对象两种方式绑定的!

对象方式

代码语言:javascript
复制
<div id="app">
    <h2 :style="{color:cor,fz:mfz}">{{msg2}}</h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            cls1:"btn",
            cls2:"btn-lg",
            cls3:"col-md",
            cor:"green",
            mfz:"22px",
            msg2:"十月OctDream"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })

:style直接绑定,对象内的属性来自data,data对象的属性是css属性值!还有一种直接通过数组绑定样式!

数组方式

代码语言:javascript
复制
    <h2 :style="[css1,css2]">{{msg2}}</h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            css1:{
              fontSize:"58px",
            },
            css2:{
                color:"purple"
            },
            cls1:"btn",
            cls2:"btn-lg",
            cls3:"col-md",
            cor:"green",
            mfz:"22px",
            actived:"actived",
            isActive:false,
            msg:"十月梦想",
            msg2:"十月OctDream"
        },
        mounted:function(){
            console.log(this)
        },
        methods:{
            getCor:function (){
                this.isActive=!this.isActive
            }
        }

    })
</script>

        可以直接在一个标签绑定多个属性对象,这个属性定义在data中,每个对象写CSS样式,但是比如font-size形式改为驼峰法fontSize:"20px",等,如果是字符串需要定义在引号中!

这样直接就绑定了CSS样式无需绑定class

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-9-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 绑定class
    • 对象方式
      • 数组方式
      • 直接绑定style样式
        • 对象方式
          • 数组方式
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档